Question

我目前在我的网站上有一个顶部标题，顶部有一些文字，但文字已在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。

Answer 1

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

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

Answer 2

您可以使用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 3

要让用户在其计算机上的网站上查看您的字体，您必须在您的网站上包含您的字体。有多种方法可以做到这一点。

您可以使用font-face规则执行以下操作：

<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 4

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

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

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

我怎么能确定我的所有用户都有这个字体系列？

4 个答案: