javascript - Chrome 操作系统(隐身)和 Linux Chrome 网络字体显示问题

Question

我在跨各种平台测试网络字体时遇到了一个奇怪的问题。我正在处理 Windows Chrome font rendering issues使用 Javascript navigator.appVersion检查耦合到 webkit 媒体查询(因为 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 的不一致(在两种隐身方式下工作/常规的)。这些文件存储在公共(public) 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，图标字体不适用于文本)

Answer 1

有些地方看起来不对:

1. 您注入(inject)的样式被 <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 中的页面。