快乐双彩每天都开奖吗:PSA: always add a generic font-family backup

September 27th, 2017. Tagged: font-face

TL;DR:

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

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:

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.

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.

No Arial, no Verdana, etc. It happens.

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

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.

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;.

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.

Exhibit 2: HelveticaNeue

"Helvetica Neue" spelled without a space like "HelveticaNeue" is valid in Chrome. But you get Times in Firefox. Ugh!

Conclusion

The only web-safe fonts are the generic ones, namely: serif, sans-serif, cursive, fantasy, monospace. Be safe and always have one of those. Bye!

Tell your friends about this post: Facebook, Twitter, Google+

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov


  • 运城市在长三角招商引资149.9亿元 2019-04-08
  • 济南五胞胎雪虎宝宝亮相 四雌一雄萌态十足 2019-04-08
  • 去产能迎年中考 煤炭、钢铁企业债务问题依然存在 2019-04-07
  • 最高检等四部门出台意见 指导依法办理恐怖活动和极端主义犯罪案件 2019-04-07
  • 广州市黄埔区人民法院公告专栏 2019-03-28
  • 这个“海之宁”是个死抱着相对论旧谬误不放,疯狂反对科学新真理的跳梁“小丑”,这个跳梁“小丑”根本就不懂得尊重客观事实及其规律,总是无视、脱离、歪曲客观... 2019-03-22
  • 如何理解孔子这句话?北大教授胡军动情论生死 2019-03-21
  • 海外舆论关注中国最新军备 称赞习近平主席强军号令 2019-03-19
  • 女性之声——全国妇联 2019-03-19
  • 美司法部科米在希拉里邮件门调查中存在过失 2019-03-17
  • “四新”彰显党的十九大思想灵魂和精髓要义 2018-08-17
  • 热身赛-U17女篮73-68立陶宛 杨舒宇19分刘禹彤13分 2018-08-16
  • 七月流火:一半是甜蜜 一半是仁慈 2018-08-15
  • “嫦娥”飞向月球背面,将会揭开哪些秘密? 2018-08-15
  • 一代枭雄身后事:“曹操墓”认定过程缘何一波三折? 2018-08-04
  • 632| 365| 422| 563| 535| 480| 348| 354| 600| 554|