【问题标题】:Google web font displaying incorrect weight on initial page load谷歌网页字体在初始页面加载时显示不正确的权重
【发布时间】:2015-04-24 15:21:33
【问题描述】:

我正在使用 Google 网络字体,在我网站的“head”部分中这样链接:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,700">

我的客户正在使用 Safari 并报告以下行为:

  1. 页面首次加载时,设置为“font-weight:300”的字体 显示的粗体。

  2. 当浏览器窗口缩小并重新缩放时,它会自行清理 向上,字体以正确的粗细显示。

什么会导致初始状态?页面加载速度可能比从 Google 下载的三个权重 (300,600,700) 快吗?

希望了解有关外部字体如何加载与本地 CSS 等相关的任何见解。

【问题讨论】:

  • css 中的默认字体粗细是多少?
  • 我想我没有,我只是直接在H1标签上指定了它。你的意思是我应该在 body 标记上指定它,还是在 CSS 的其他地方指定它?
  • 如果它改变了您的 p 标签等的权重,可能值得在您的 css 中将默认权重设置为 300(或其他任何值),看看是否有帮助 - 我真的无法进一步排除故障没有看到实际问题
  • 您能解释一下“设置默认重量”是什么意思吗?这是在body标签中还是其他意思?
  • 抱歉,当然 - 您可以添加到您的段落声明(或受影响的声明)中,例如 p {font-size: 16px etc etc and font-weight: 300 ;} 在此规则中。

标签: css fonts


【解决方案1】:

当您的 CSS 中未明确指定时,默认字体粗细为 400(别名为“normal”),但您正在加载的字体没有粗细为 400 的变体(只有 300、600 和 700) .因此,任何在其 CSS 规则中使用此字体的元素也需要显式设置 font-weight: 300(或 600 或 700)以确保使用正确的权重变量。

(在没有字体粗细的情况下选择粗细的规则记录在CSS2 spec 中,从“选择缺失的粗细如下”开始,因此甚至可能是 safari 存在字体粗细查找错误在这里)

【讨论】:

    猜你喜欢
    • 2019-07-27
    • 1970-01-01
    • 2013-05-09
    • 1970-01-01
    • 2014-08-29
    • 1970-01-01
    • 1970-01-01
    • 2018-08-07
    • 2016-03-31
    相关资源
    最近更新 更多