我怎样才能确定我的所有用户都有这个字体系列？
Posted
技术标签:
【中文标题】我怎样才能确定我的所有用户都有这个字体系列？【英文标题】：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? 【参考方案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/cs-s-ref/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）。
另见：
font-family docs。
@font-face docs。
Article on CSS-Tricks about @font-face。
【讨论】：
【参考方案4】：确保所有访问者/用户都拥有所需字体的最佳方法是为他们提供字体。
在向他们提供您想要的字体之前，请选择您拥有许可或免费字体的字体。免费字体的更好来源之一是 Google 字体：1
一旦您准备好提供给访问者/用户的许可或免费字体，您就可以使用 @font-face 将字体交付给访问者（有关将字体交付给用户/访问者的方法，请参阅：Preloading Google Fonts )
【讨论】：
以上是关于我怎样才能确定我的所有用户都有这个字体系列？的主要内容，如果未能解决你的问题，请参考以下文章