CSS:为什么Chrome(在Linux上)忽略我的字体系列?

时间:2016-08-25 19:17:25

标签: css font-family

当我使用Chrome开发者工具检查我网站上的元素时,我将以下内容视为我的元素的“计算”样式:

font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", sans-serif

但如果我进一步向下滚动(到“计算”标签的底部),我会看到:

Rendered Fonts
Liberation Sans—Local file(11 glyphs)

由于我的(Linux)操作系统必须Arialsans-serif,所以我很困惑为什么Chrome会选择“Liberation Sans”:它甚至不是在我的font-family列表中。

我责备自己糟糕的CSS,但理论上“Computed”标签显示了我的规则的最终/处理版本,所以无论我的原始CSS可能是多么糟糕,Chrome都清楚地看到我的font-family列表定义(并应用)我的元素......它只是忽略它。

任何人都可以解释这个谜吗?

编辑:我安装了一个字体检查程序,事实证明Linux(Mint)实际上并没有Arialsans-serif字体...但即便如此,我认为浏览器(至少)提供了一种基本的sans-serif字体,无论操作系统是什么?这是不正确的吗?

4 个答案:

答案 0 :(得分:2)

您的字体堆栈指定Arial。

出于许可的原因,大多数Linux系统上都没有Arial,并且它通常是Liberation Sans的别名,因为Liberation Sans与Arial具有相同的维度(指标)。然而,字体设计是不同的(这就是为什么Liberation Sans通常默认的Linux sans serif字体,它的设计不受欢迎)。

Helvetica是另一个众所周知的遗留字体名称,通常不存在。如果您尝试在字体堆栈中使用它,它通常会触发各种别名。它甚至可能在Arial之前引发解放Sans的别名(因为Arial是微软在推出Windows时可以替代的穷人Helvetica并具有相同的指标)。

(当您在Windows上创建指定Helvetica的PDF时,它通常会替换ArialMT。)

如果您只指定sans-serif,您将获得系统“最佳”sans-serif字体,通常是干净深受喜爱的设计,但它们的尺寸因系统而异。

由于设计人员认为所有系统都使用相同字体的破碎网站数量,在页面设计中可以修复相同的像素宽度,因此字体替换通常先按公制,设计第二优先级。

在所有客户端上获取相同字体的唯一方法是使用网络字体,但由于字体下载和用户(而非“设计人员”)更喜欢快速页面,这会降低您的网站速度。 Web字体需要注意许可和字体unicode覆盖,安全意识的用户将阻止第三方下载,并且存在大量关于模糊Web字体格式的货物结果(现在大多数浏览器中的opentype都已足够)。

认为HelveticaNeue是alpha和omega的那种苹果疯子通常对Open Sans满意为网络字体。

但即使使用网络字体,渲染也会略有不同,因为不同的系统使用不同的文本引擎都具有其特定功能,某些字体在给定引擎上的效果优于其他字体。

答案 1 :(得分:1)

Chrome for Linux中有两种字体后备机制。一种是操作系统级别的后备。另一个是CSS指定的后备广告。在Chrome询问您的操作系统中是否提供HelveticaNeue时,操作系统级别的回退机制会将Liberation Sans返回到Chrome,而不是未找到。 Chrome接受了返回的Liberation Sans,并认为操作系统返回了答案,因此忽略了CSS后续字体后备列表。

答案 2 :(得分:0)

我发现你的font-family属性中既有Helvetica又有Arial。当Helvetica不可用时,我猜你想要Arial ......一个回答的问题是:two fonts

现在,如果我想只有一个字体系列,例如Century Gothic,我会这样做:

font-family: "Century Gothic", CenturyGothic, AppleGothic, Sans-Serif;

这是一个很好的guide

我的问题是,为什么你有这么多

答案 3 :(得分:-2)

由于Google Chrome浏览器有些人会从网址中留下WWW,因此您可以尝试手动设置。 特别是在Unix或Mac系统中。