psa name_PSA：始终添加通用字体系列备份

最新推荐文章于 2023-02-06 09:48:31 发布

cunbei2644

最新推荐文章于 2023-02-06 09:48:31 发布

阅读量220

点赞数

文章标签： java css python chrome css3

原文链接：https://www.phpied.com/psa-always-add-a-generic-font-family-backup/

版权

psa name

TL;DR:

TL; DR：

/* WRONG */
.huh {
  font-family: Helvetica Neue, Helvetica, Arial;
}
/* OK */
.huh {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

展品1：必应搜索(Exhibit 1: Bing search)

Yeah, I use Bing search, shut up!

是的，我使用必应搜索，闭嘴！

Check this out, the ugly Times New Roman font to the right where it says Rewards:

看看这个，丑陋的Times New Roman字体在右边显示Rewards的位置：

Definitely not what the designers intended.

绝对不是设计师想要的。

The problem there is that the CSS is just font-family: Arial;. No generic fallback. Using font-family: Arial, sans-serif; would look so much better.

那里的问题是CSS只是font-family: Arial; 。没有通用后备。使用font-family: Arial, sans-serif; 看起来好多了。

On the surface there's nothing wrong because Arial is a "web-safe" font. Except for some reason a bunch of the "safe" fonts are disabled on my machine. Don't know why. Some software update of sorts.

从表面上看，没有什么错，因为Arial是一种“网络安全”字体。除非出于某些原因，否则我的计算机上禁用了一堆“安全”字体。不知道为什么。一些软件更新。

No Arial, no Verdana, etc. It happens.

没有Arial，没有Verdana等。它发生了。

And when there's no "sans-serif" generic backup, the browser chooses the default Times New Roman. Ouch.

而且，当没有“ sans-serif”通用备份时，浏览器将选择默认的Times New Roman。哎哟。

图表2：拼写错误或字体丢失 (Exhibit 2: misspelled or missing font)

Check this page out. It has a font for the body and some overwrites:

签出此页面。它具有用于主体的字体和一些覆盖：

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
span {
  font-family: Arial, sans-serif;
}
p {
  font-family: Ariel;
}
div {
  font-family: Ariel, sans-serif;
}

Result:

结果：

The span is fine. The p is wrong because Ariel is misspelled. The div is also fine, because even though misspelled, there's a generic font family as a backup.

span很好。 p是错误的，因为Ariel拼写错误。 div也很好，因为即使拼写错误，也有通用字体家族作为备份。

The problem with the misspelled font is that the browser drops the value (Ariel) but not the whole declaration (font-family: Ariel). So the body style is still overwritten but with invalid value. As if you did: font-family: initial;.

字体拼写错误的问题是浏览器会删除值( Ariel )，而不是整个声明( font-family: Ariel )。因此， body样式仍将被覆盖，但其值无效。就像您做过的一样： font-family: initial; 。

You may think misspelling is too contrived. But hey, it happens. Happened to me. Also happens when you think a fancy @font-face should be available, but for some reason it didn't load.

您可能会认为拼写错误是人为的。但是，发生了。发生在我身上。当您认为精美的@font-face应该可用，但由于某种原因未加载时，也会发生这种情况。