Question

在我的网站上，出于某种原因，Arial字体在多个设备上的显示方式不同。

很好，投诉开始大约一个月前到来，我怀疑根本原因是在本地某处（浏览器或操作系统）。所有有问题的用户都坐在不同版本的Windows上，大多数都使用Chrome（但不是每个人）。

试图调查这个问题，但没有找到共同点。

是否有人遇到过这样的问题？

代码：

<h1 style="font-family: Arial;">Title</h1>

Answer 1

我建议您将字体文件放在网站目录中，并从目录中设置路径。（有时可能该设备没有你的字体。）

在你的css文件的顶部：

@font-face {
    font-family: "BYekan";
    src: url("../font/BYekan.eot?#") format("eot"), url("../font/BYekan.woff") format("woff"), url("../font/BYekan.ttf") format("truetype");
}

使用它：

body{
    font-family: "BYekan";
}

Answer 2

是的，这是有原因的。没有任何说明任何给定的设备或浏览器必须遵守任何给定的字体渲染标准。因此，谨慎的做法是创建整体网站设计，假设文本将在浏览器/设备之间呈现不一致。一旦你假设渲染文本将适合这个/那个空间＆＃34;你有麻烦了。

而是创建一个优雅地处理字体渲染问题的设计。

Answer 3

这应该不足为奇，你所谓的“根本问题”实际上不是问题，而只是字体在浏览器中的工作方式。

如果没有明确的@font-face规则和真实的字体来源，你就会告诉浏览器你并不真正关心它加载的是什么，只要加载的字体大致匹配你的内容要求。如果你要求“Arial”，那么浏览器会向操作系统询问声称属于Arial系列的字体，并且不同的设备可能（或者更确切地说，将）安装了不同版本的Arial。因此，不同设备的内容会有所不同。

但是，很多人都忘记了这一点，如果是这样的话也没关系。重要的是您的网站内容看起来一致。人们不会同时在两台计算机上查看您的网站，然后注意它们看起来并不像素。个人用户将一次在一台设备上查看您的内容。那么：在单个设备上看起来是否一致？好！你做完了。在这种情况下，实际使用哪个版本的Arial几乎无关紧要。

Web - Arial字体在多个设备上的显示方式不同

3 个答案: