【问题标题】:How to specify a web safe user default font if google font is not available如果谷歌字体不可用,如何指定网络安全用户默认字体
【发布时间】:2017-06-27 23:44:35
【问题描述】:

为了设计,我喜欢在标题中使用非常大的字体(大约 70 - 85 像素)为了防止它压倒页面,我需要一个非常细的字体。我在谷歌字体上找到了 Poiret One,它被归类为草书家族。它是一种非常纤细、非常优雅的字体,但草书系列的默认字体似乎是 Comic sans,而恰恰相反——非常笨重、粗体且在大标题中没有吸引力。在我的 css 文件中,我有:

h1 {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  font-size: 85px;
  color: #99ccff;
}

我想将 courier new 添加为用户默认字体,因为它是最薄的网络安全字体,并添加以下属性以使字符间距类似于 Poiret One,这样我就不会溢出我的引导列:

font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;

如果用户无法查看 Poiret One,我可以使用什么 css 告诉浏览器,请使用 courier new 并按照上面给出的字体修改?

期待解决方案。谢谢!

【问题讨论】:

  • 您可能需要检查字体是否使用 JavaScript 成功加载,以便应用替代类作为元素的后备。看看:stackoverflow.com/questions/12312323/…
  • Poiret One 字体加载正常,除非那些没有启用脚本或由于某种原因他们无法访问谷歌字体的人。然后加载comic sans,它看起来很糟糕,这就是为什么我想通过上面列出的修改将默认值更改为courier new。

标签: html css fonts twitter-bootstrap-3 typography


【解决方案1】:

像这样使用font-family:

font-family: 'Poiret One', cursive, 'Courier New';

当浏览器找不到Poiret One 或cursive 字体时,它将使用Courier New 字体。

【讨论】:

  • 把'Courier New'放在cursive之前不是更好吗?在'Courier New' 之前,OP 似乎不需要草书
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-05-09
  • 2011-11-18
  • 1970-01-01
  • 2012-05-04
  • 2011-10-17
相关资源
最近更新 更多