我怎样才能确定我的所有用户都有这个字体系列？答案

【问题标题】：How can I be sure all of my users have this font-family?我怎样才能确定我的所有用户都有这个字体系列？
【发布时间】：2016-05-25 00:17:51
【问题描述】：

我目前在我的网站上有一个顶部标题，它是一个顶部带有一些文本的图像，但文本是在 photoshop 上添加到图像上的。我现在需要使文本动态化，因此我已将文本作为图像的一部分删除，并将其添加到空白图像的顶部：

<span style="font-family: Bookman Old Style;
font-size: 23px; 
position: absolute; 
left: 160px; 
top:20px">
My Site Top Header
</span>

我可以在我的机器上复制完全相同的视图，但是否担心用户没有这个字体系列，而它会默认使用一些难看的字体？我知道我的所有用户都在使用装有最新 Chrome / Firefox 或 IE 11 的 Windows PC。

【问题讨论】：

相关：How can I detect which font was used in a web page?

标签： html css fonts font-family

【解决方案1】：

为了让用户在他们的机器上看到您在网站上的字体，您必须在您的网站中包含您的字体。有多种方法可以做到这一点。

您可以使用字体规则执行以下操作：

<style> 
@font-face {
    font-family: myFirstFont; // pick a font name to use in your file
    src: url(sansation_light.woff); // relative font file location
}

div {
    font-family: myFirstFont;
}
</style>

来源：http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

【讨论】：

【解决方案2】：

无法保证用户会安装该字体。您可以将license the font 作为网络字体，然后将网络字体与页面一起提供。就字体而言，它并不是特别昂贵，因此这可能是一个合理的选择。还有一个小问题是许多广告拦截器也会屏蔽网络字体，所以如果您的用户安装了广告拦截器，他们也不会获得网络字体。

底线是你应该指定一个不“丑陋”的后备字体，不要担心它。结合网络字体，您可能会涵盖几乎所有的基础。

【讨论】：

我还没有听说过会阻止字体的广告拦截器。

【解决方案3】：

您可以使用font-family 规则声明多种字体。如果列表中的第一个字体不可用，则下一个将用作后备。例如，如果您将 font-family 设置为以下内容：

font-family: 'Bookman Old Style', Arial, sans-serif;

浏览器首先会尝试加载 Bookman Old Style 字体，如果不可用，它会尝试加载 Arial 字体，如果也不可用，它会加载默认的无衬线字体。

所以当用户没有安装这个字体时，你可以选择可能已经安装的类似字体，这样你的网页就不会那么难看了。

如果您拥有此字体（即免费或购买），您可以使用@font-face 声明将其包含在您的页面中。例如：

@font-face {
  src: url("http://example.com/your-font.woff2");
  font-family: 'Your Font';
}
body {
  font-family: 'Your Font', Arial, sans-serif;
}

在这种情况下，浏览器将从您指定的 URL 获取字体并将其应用到 <body>。如果字体请求失败，或者在字体加载之前，浏览器将应用备用字体（即 Arial）。

另见：

【讨论】：

【解决方案4】：

确保所有访问者/用户都拥有所需字体的最佳方法是为他们提供字体。

在向他们提供您想要的字体之前，请选择您拥有许可或免费字体的字体。免费字体的更好来源之一是 Google 字体：1

一旦您准备好提供给访问者/用户的许可或免费字体，您就可以使用 @font-face 将字体交付给访问者（有关将字体交付给用户/访问者的方法，请参阅：Preloading Google Fonts )

【讨论】：