Javascript 破坏了 Css 字体样式（Linkedin Badge）

Question

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

屏幕截图中提供的字体差异： 屏幕截图

您可以在我的实时网站上亲自看到效果，如果您从页面切换，您可以看到加载徽章时“关于我”页面上的字体如何变化。

https://rastersky.com/landing?page=aboutme

我认为在过去这一切都工作得很好，但由于某种原因现在不行了。我怀疑linkedin的javascript与此有关，但仍不确定。

我尝试用 css 隔离徽章，但这不起作用：

.LinkedinBadge {
  all: unset;
  isolation: isolate;
}

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

非常感谢你。

尼克·詹斯

Answer 1

我不确定问题是什么，但也许您可以将徽章渲染移动到另一个文件，并尝试从那里渲染它，这样它就不会干扰。

另外，请尝试将“重要”标记添加到您的 CSS 规则中。他们可能能够推翻影响您字体的因素。