Chrome 操作系统（隐身）和 Linux Chrome 网络字体显示问题

Question

我在跨平台测试网络字体时遇到了一个奇怪的问题。我正在使用 Javascript navigator.appVersion 检查与 webkit 媒体查询耦合的 Windows Chrome font rendering issues（因为 Chrome 和 Safari 是 Webkit，如果在 Windows 上可以排除 Safari），并在此过程中产生了一个新问题。

我在隐身模式下进行测试，这是一种无需保存图像等即可快速查看页面的方法，但这对我来说是一个新方法。

我在if(navigator.appVersion.indexOf("Win")>-1 后面的 else 子句中的操作之前和之后都添加了控制台调试，所以我可以看到循环没有被中间的任何错误语法破坏，也没有引发错误。

我认为这可能是 Chrome 操作系统中的错误，但在 Linux Mint 上，字体不会在任何类型的 Chrome 窗口中加载。清除缓存、cookie 和映像文件对任一操作系统都没有影响。

截图：

• Chrome OS regular window (= Windows 8 Chrome),
• CrOS incognito window (= Linux Mint Chrome) - 在这两种情况下，控制台都会记录 "loaded"，并且 <style> 元素会按预期插入到 DOM 中。

对于如何调和这里的不一致之处，我有点不知所措，而且由于我的 Javascript 在某些情况下运行，我对哪里出了问题感到困惑。我不太愿意就此联系任何专家论坛，但如果我最好为某种 Chrome 开发组这样做，请告诉我。

如果有人想自己测试here's the page in the screenshots。

我还尝试以隐身模式登录 GitHub 和我的 Google 帐户，以防我发现与权限相关的问题，但它没有改变任何东西，而且无论如何这仍然无法解释与 Windows 的不一致（在隐身模式下工作） /常规的）。这些文件存储在公共 GitHub 存储库中，即使在我的网站上没有字体呈现的情况下，我也绝对可以在浏览器中访问它们。

<script>
if (navigator.appVersion.indexOf("Win")>-1) {
    console.log("Win test")
    chromeQuery = document.createElement('style');
    chromeQuery.setAttribute('type','text/css');
    chromeQuery.innerHTML = "@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chrome-specific SVG font */ @font-face{ font-family: \"SEGOEUIL\"; src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format(\"svg\"), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'); font-weight: normal; } @font-face{ font-family: \"SEGOEUIL\"; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format(\"svg\"), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face{ font-family: \"SEGOEUIL\"; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format(\"svg\"), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'); font-style: italic; } }";
    document.querySelector('head').appendChild(chromeQuery);
}
else {
    fontload = document.createElement('style');
    fontload.setAttribute('type','text/css');
    fontload.setAttribute('id','fontload')
    fontload.innerHTML = "@font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot'); src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot?#iefix') format('embedded-opentype'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format('svg'); font-weight: normal; } @font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot'); src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot?#iefix') format('embedded-opentype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format('svg'); font-weight: bold; font-style: normal; } @font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot'); src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot?#iefix') format('embedded-opentype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format('svg'); font-style: italic; }";
    document.querySelector('head').appendChild(fontload);
    console.log('loaded')
}
</script>
<noscript><style id="fontload" type="text/css">

@font-face{ 
        font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
        src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot');
        src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot?#iefix') format('embedded-opentype'),
             local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'),
             local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'),
             local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format('svg');
        font-weight: normal;
    }

    @font-face{ 
        font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot');
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot?#iefix') format('embedded-opentype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format('svg');
        font-weight: bold;
        font-style: normal;
    }

    @font-face{ 
        font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot');
        src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot?#iefix') format('embedded-opentype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'),
             url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format('svg');
        font-style: italic;
    }

</style></noscript>

编辑我在资源面板中看不到任何字体，所以我看不到成功的样子——我可以看到似乎是 opentype 字体显示某种（延迟？）错误，这可能是相关的？

（Source Code Pro 没有使用，icon 字体不是文本）

Answer 1

有几处看起来不对：

1. 您注入的样式被<noscript> 标签包围，因此您的字体只有在禁用 JavaScript 时才会加载
2. 您的@font-face 规则应该将您的自定义字体映射到一个系列。所以font-family: "SEGOEUIL"; 而不是font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
3. 第一条规则尝试使用本地安装的 SEGOEUIL 版本，另一条规则始终从 githubusercontent.com 加载。因此，如果用户安装了不同的版本，字体的外观可能会发生变化。
4. 为避免意外结果，请为所有三个声明设置 font-weight 和 font-style。

更改此选项可修复 Chrome 中的页面。