Javascript 破坏 Css 字体样式 (Linkedin Badge)答案

【问题标题】：Javascript destroys Css font style (Linkedin Badge)Javascript 破坏 Css 字体样式 (Linkedin Badge)
【发布时间】：2021-08-22 00:23:08
【问题描述】：

编辑：我制作了一个视频来展示这个问题。 在这里找到它：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;
}

谁能找出字体不同的原因以及如何解决这个问题？如果我需要提供更多详细信息，请告诉我。

谢谢。

尼克·詹斯

【问题讨论】：

PS：我现在根本看不到我的徽章了。看起来它倒下了（只对我来说？）一旦它恢复，我就会告诉你。也许他们正在修复它。我希望！
同样的问题This user 有吗？但那是一个月前的事了。还提到了一种解决方法。
看到我不是唯一一个，我有点松了一口气。感谢分享！
您解决了吗？我仍然有这个问题。

标签： javascript html css linkedin badge

【解决方案1】：

我昨天在linkedin上打开了一张支持票，我被告知堆栈溢出的linkedin API开发人员应该解决这个问题。我不喜欢它的工作原理，因为我没有明确的时间表来说明他们何时会做出回应，就像他们甚至读过它一样吗？

因此，如果有人仍然有兴趣提供帮助。我制作了一个视频来介绍这个问题。

https://streamable.com/r8sl85

【讨论】：

【解决方案2】：

在他们解决问题之前，我能够推动 LinkedIn 支持。他们的工程团队能够解决该错误并将解决方案投入生产。

【讨论】：

【解决方案3】：

我不确定问题出在哪里，但也许您可以将徽章渲染移到另一个文件，然后尝试从那里渲染它，以免干扰。

【讨论】：

您能解释一下将其呈现在不同的文件中是什么意思吗？
我发现几乎每个人都在建议 iframe。它对我有用，但我无法为 LinkedIn 提供支持票。谢谢。
我有同样的问题，我创建了一个反应页面，当把嵌入的代码放在我的页面中时，它完全覆盖了我的 css 样式。
我也尝试将它放在一个完全不同的 react 组件中，然后将其导入我的 index、js 并渲染它，但它仍然改变了我所有的 css

【解决方案4】：

我也有同样的问题。根据用户是否登录 Linkedin 以及他们在 Linkedin 中使用的语言设置，样式可能会有所不同。好像和AB测试有关。

我联系了 Linkedin 支持，但在收到很多消息后，他们通知我不要对徽章的实施给予支持。

【讨论】：