css - Safari 优先安装字体

Question

在我的工作场所工作的一些设计师注意到，在 Safari 上，我们网站的字体似乎是安装在他们机器上的字体，而不是我们提供的字体。

我们在两个不同的场合和两种不同的字体中注意到了它:Montserrat 和 Open Sans。

第一次(使用 Montserrat)用户有一个更新版本的字体，她只在 Safari 上看到了最新版本，因为她已经在她的本地机器上安装了它(这在 Chrome 上没有发生)。

第二次(使用 Open Sans)我们只在一台特定的机器上看到了更粗的字体:然后我们发现用户在那台机器上安装了比我们提供的字体(600)更粗的字重(700)。规则是

font-weight: bold;

所以我假设浏览器从已安装的字体中选择了最粗的 (700)。

我做了一些研究，但没有找到任何证据。有谁知道 Safari 上是否有任何证据/文档优先于已安装的字体而不是您所服务的字体？

我们没有使用来自谷歌 CDN 的谷歌字体，因为我们决定下载它们并从我们自己的服务器提供它们。

编辑:我正在添加我们用来加载字体的代码(使用 Google Webfonts Helper 生成):

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url("font/opensans/open-sans-latin_cyrillic-400.eot");
  src: local("Open Sans"), local("OpenSans"), url("font/opensans/open-sans-latin_cyrillic-400.eot?#iefix") format("embedded-opentype"), url("font/opensans/open-sans-latin_cyrillic-400.woff2") format("woff2"), url("font/opensans/open-sans-latin_cyrillic-400.woff") format("woff"), url("font/opensans/open-sans-latin_cyrillic-400.ttf") format("truetype"), url("font/opensans/open-sans-latin_cyrillic-400.svg#OpenSans") format("svg"); 
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url("font/opensans/open-sans-latin_cyrillic-600.eot");
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("font/opensans/open-sans-latin_cyrillic-600.eot?#iefix") format("embedded-opentype"), url("font/opensans/open-sans-latin_cyrillic-600.woff2") format("woff2"), url("font/opensans/open-sans-latin_cyrillic-600.woff") format("woff"), url("font/opensans/open-sans-latin_cyrillic-600.ttf") format("truetype"), url("font/opensans/open-sans-latin_cyrillic-600.svg#OpenSans") format("svg"); 
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url("font/montserrat/montserrat-latin-regular.eot");
  src: local("Montserrat-Regular"), url("font/montserrat/montserrat-latin-regular.eot?#iefix") format("embedded-opentype"), url("font/montserrat/montserrat-latin-regular.woff2") format("woff2"), url("font/montserrat/montserrat-latin-regular.woff") format("woff"), url("font/montserrat/montserrat-latin-regular.ttf") format("truetype"), url("font/montserrat/montserrat-latin-regular.svg#Montserrat") format("svg"); 
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url("font/montserrat/montserrat-latin-700.eot");
  src: local("Montserrat-Bold"), url("font/montserrat/montserrat-latin-700.eot?#iefix") format("embedded-opentype"), url("font/montserrat/montserrat-latin-700.woff2") format("woff2"), url("font/montserrat/montserrat-latin-700.woff") format("woff"), url("font/montserrat/montserrat-latin-700.ttf") format("truetype"), url("font/montserrat/montserrat-latin-700.svg#Montserrat") format("svg"); 
}

以及为页面的不同部分提供不同字体的相关代码。

body{
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

h6, h5, h4, h3, h2, h1{
    font-family: inherit; // inheriting from body
    font-weight: bold;
}

.view{
    font-family: 'Montserrat', sans-serif;
}

Answer 1

根据您展示的代码，解决方案很明显:如果您不希望本地字体受到干扰，请不要让浏览器先尝试 local()。或者根本没有，真的。

现在是 2017 年，在今天的浏览器环境中，您只想要src: url(woff font version) format("woff")，别无其他:没有其他格式，没有本地优先，只是明确你的内容应该使用的字体。在当前的浏览器环境中，eot 和 svg 甚至不再作为有效格式存在，而 woff 是 ttf/otf，但经过压缩，并明确标记为“用于网络”，以便可以省略一些通常需要的数据，从而产生更小的字体有效负载。您可以添加的唯一其他格式是 WOFF2，它使用更新的压缩算法并允许将单个字体“切片”为多个子集，以便浏览器仅加载它需要的切片来设置您的内容样式一次完成整个字体。

无论为您生成此 CSS 的是什么，似乎仍然停留在“webfonts 在 2012 年的工作方式”中。