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

Question

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

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

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

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

截图：

Chrome OS 常规窗口 (= Windows 8 Chrome) ,
CrOS 隐身窗口 (= Linux Mint Chrome) - 控制台"loaded"在两种情况下都记录，并且<style>元素按预期插入到 DOM 中。

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

如果有人想自己测试，这里是屏幕截图中的页面。

我还尝试以隐身方式登录 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 未使用，图标字体不用于文本）

score 1 · Accepted Answer

有几件事看起来不对：

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

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

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

1 回答 1

Related

Reference