Question

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

我们在两个不同的场合注意到它并使用两种不同的字体：Montserrat和Open Sans。

第一次（使用蒙特塞拉特）用户有更新版本的字体，她只在Safari上看到了最新版本，因为她已将其安装在本地机器上（这不是在Chrome上发生的）。

第二次（使用Open Sans）我们只在特定的机器上看到了一个更大胆的字体：然后我们发现在那台机器上，用户安装了比我们服务的那个更大胆的重量（700）（600）。规则是

font-weight: bold;

所以我认为浏览器从已安装的字体中选出了最大胆的（700）。

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

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

编辑：我添加了用于加载字体的代码（使用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似乎仍然停留在“2012年的webfonts如何工作”中。

Answer 2

最后我使用了@ Mike'Pomax'Kamermans在最后一条评论中建议他自己的答案，我在这里发布它是为了清楚。

除了local文件和src文件之外，我们删除了每个.eot规范和每个.woff2。

然后我们添加了这个声明来告诉Safari我们的粗体字体应该用600权重渲染，否则Safari会查看已安装的字体副本（包括700重量）。

@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: bold;
   src: url('font/open-sans-latin_cyrillic_latin-ext-600.eot'); /* IE9 Compat Modes */
   src: url('font/open-sans-latin_cyrillic_latin-ext-600.woff2') format('woff2'); /* Super Modern Browsers */
}

Safari优先安装字体

2 个答案: