我如何确定我的所有用户都拥有这个 font-family？

Question

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

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

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

Answer 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

Answer 2

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

最重要的是，您应该指定一个不是 "ugly" 的后备字体，不要担心。结合网络字体，您可能几乎涵盖了所有基础内容。

Answer 3

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

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

浏览器首先会尝试加载 Bookman Old Style 字体，如果不可用，它将尝试加载 Arial 字体，如果也不可用，则会加载默认的 sans-serif 字体。

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

如果您拥有此字体（即它是免费的或您购买的），您可以使用 @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）。

另请参阅：

Answer 4

保证所有 visitors/users 都拥有所需字体的最佳方法是为他们提供字体。

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

一旦您准备好提供给您的 visitors/users 的许可字体或免费字体，您就可以使用@font-face 将字体提供给访问者（有关将字体提供给 [=20 的方法，请参阅=]: Preloading Google Fonts )

我如何确定我的所有用户都拥有这个 font-family？

How can I be sure all of my users have this font-family?

html

css

fonts

font-family