当前位置: 首页 > 知识库问答 >
问题:

包括谷歌网页字体链接还是导入?

狄宪
2023-03-14
<link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css'>

通过样式表中的导入?

@import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

或使用web字体加载程序

共有1个答案

史骏
2023-03-14

对于90%+的情况,您可能需要 标记。作为经验法则,您希望避免@import规则,因为它们会推迟所包含资源的加载,直到文件被获取。如果你有一个构建过程“扁平化”@import的,那么你就会在web字体上产生另一个问题:像Google WebFonts这样的动态提供程序提供特定于平台的字体版本,所以如果你只是内联内容,那么你最终会在某些平台上得到破碎的字体。

现在,为什么要使用web字体加载器?如果您需要完全控制字体的加载方式。大多数浏览器将推迟绘制内容到屏幕上,直到所有CSS下载和应用-这避免了“未样式内容的闪光”问题。缺点是..您可能会有额外的暂停和延迟,直到内容可见。使用JS加载器,您可以定义字体如何以及何时变得可见…例如,您甚至可以在屏幕上绘制原始内容后将它们淡入。

再说一次,90%的情况是 标记:使用一个好的CDN,字体会很快下来,甚至更有可能从缓存中取出。

欲了解更多信息,并深入了解谷歌Web字体,请查看这段GDL视频

 类似资料:
  • 在页面上包含谷歌字体的首选方式是什么? Via the tag

  • 我与使用google-webaffts有一个非常严重的冲突。好的,这是代码: 这是在头: 这是在css文件中: “奥斯瓦尔德”是由3种字体组成的字体系列: 书(300) 正常(400) 粗体(700) 正如你看到的那样..我只加载了粗体字(700)。(你可以在查询中看到)它一直工作到这里,但是… 问题是: 我的计算机上安装了3种字体(300,400,700)的桌面版本,只要这些字体被激活…浏览器在

  • 我目前正在为我的网站使用2倍的谷歌字体。 使用这些谷歌字体设计的单词看起来渲染速度非常慢,我已经放置了http://fonts.googleapis.com/css?family=Open Sans'rel='stylesheet'type='text/css' 但是当我在谷歌字体页面上阅读时,它说,把它放在头标签的第一行之后。 所以我的问题是,我应该遵循Google字体推荐还是Insight字体

  • 我希望使用以下方法获取位置更新:FusedLocationProviderClient#RequestLocationUpdate(LocationRequest LocationRequest、LocationCallback LocationCallback、Looper Looper) 实现此方法的Stackoverflow中的大多数答案必须覆盖LocationCallback方法。最近的一

  • 我想知道google fonts是如何发现的,应该加载哪些字体。例如,当我在CSS中使用此 它返回一个立即解释的CSS(加载此资源甚至会阻止浏览器呈现afaik): 我一直认为,当您在CSS中提供时,浏览器会立即加载此资源。 但是,当您打开这支笔http://codepen.io/anon/pen/EgkvEr并查看您的网络选项卡(可能清除您的缓存)时,您可以看到它恰好加载了两个资源:http:/

  • 我有两个电子表格: 预算表,包括估计成本和实际成本 成本跟踪表,包括实际成本和收据参考 目前,我正在导入预算表中的实际成本,通过引用跟踪表中的实际成本行 所以我的预算表是这样引用成本跟踪表的:=(importrange(spreadsheet_key,sheet_name!I76")) 这很好,但是,如果我在成本跟踪表中插入一个新行,该行位于我已经引用的一些值之上,它将不会动态更新。 因此,如果我