问题描述
编辑：我制作了一个视频来展示这个问题。 在这里找到它：https://streamable.com/r8sl85
我正在我的网站上实施我的 LinkedIn 徽章。他们给我提供了代码。每当我实施它时，徽章确实有效，但不幸的是它破坏了我整个页面的字体。 我制作了一个简化的 html，通过将其与下面其他无关代码隔离来呈现问题。
当使用相同的字体 css 文件时，这两个示例具有完全不同的字体。
<link rel="stylesheet" type="text/css" href="testStyle.css">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
Some Text underneath the Badge <br />
<i>Another line of text</i> <br />
<b>Another line of text</b> <br />
<h1>the last line of text</h1> <br />
对比：
<link rel="stylesheet" type="text/css" href="testStyle.css">
<script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
<div class="badge-base LI-profile-badge" data-locale="en_US" data-size="large" data-theme="light" data-type="VERTICAL" data-vanity="nick-janse-gis-rastersky" data-version="v1"></div>
Some Text underneath the Badge <br />
<i>Another line of text</i> <br />
<b>Another line of text</b> <br />
<h1>the last line of text</h1> <br />
两者都使用相同的 CSS，如下所示：
html{
font-family:"Calibri";
}
截图中提供的字体差异： The screenshot
您可以在我的实时网站上亲自查看效果，如果您从页面切换，您可以看到加载徽章时“关于我”页面上的字体如何变化。
https://rastersky.com/landing?page=aboutme
我认为过去这一切都很好，但由于某种原因，它不再起作用了。我怀疑linkedin的javascript与此有关，但仍然不确定。
我试图用 css 隔离徽章，但这没有用：
.LinkedinBadge {
all: unset;
isolation: isolate;
}
谁能找出字体不同的原因以及如何解决这个问题？如果我需要提供更多详细信息，请告诉我。
谢谢。
尼克·詹斯
解决方法
我不确定问题是什么，但也许您可以将徽章渲染移动到另一个文件，并尝试从那里渲染它，以免干扰。
,我昨天在linkedin 上开了一个支持票，我被通知堆栈溢出的linkedin API 开发人员应该解决这个问题。我不喜欢这是如何运作的，因为我没有明确的时间表来说明他们何时会做出回应，比如他们是否已经阅读过？
所以如果有人仍然有兴趣提供帮助。我制作了一个视频来展示这个问题。
,我也有同样的问题。根据用户是否登录 Linkedin 以及他们在 Linkedin 中使用的语言设置，样式可能会有所不同。好像跟AB测试有关系。
我联系了 Linkedin 支持，但在收到很多消息后，他们通知我不支持徽章的实施。
,我能够推动 LinkedIn 支持，直到他们解决问题。他们的工程团队能够解决该错误，并将解决方案推向生产环境。