【发布时间】：2013-01-18 13:18:54
【问题描述】：
我正在使用只能访问 CSS 文件的 CMS。所以，我不能在文档的 HEAD 中包含任何东西。我想知道是否有办法从 CSS 文件中导入网络字体？
【问题讨论】：
标签： css fonts google-webfonts
【发布时间】：2013-01-18 13:18:54
【问题描述】：
使用标签@import
@import url('http://fonts.googleapis.com/css?family=Kavoon');
【讨论】：
使用@import 方法：
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
显然，“Open Sans” (Open+Sans) 是导入的字体。所以用你的替换它。如果字体名称有多个单词，请像我一样通过在每个单词之间添加+ 符号对其进行 URL 编码。
确保将 @import 放在 CSS 的最顶部，在任何规则之前。
Google 字体可以自动为您生成 @import 指令。选择字体后，单击它旁边的(+) 图标。在左下角，将出现一个名为“1 Family Selected”的容器。单击它，它将展开。使用“自定义”选项卡选择选项，然后切换回“嵌入”并单击“嵌入字体”下的“@import”。将 <style> 标记之间的 CSS 复制到您的样式表中。
【讨论】：
-
你应该避免使用@import，因为它会延迟加载包含的资源，直到文件被获取。在此处查看详细答案：stackoverflow.com/a/12380004/925560
-
将@import 行移到顶部解决了我的问题！谢谢！
-
为什么谷歌会这样说？ Google Insides 声称不做@import。 developers.google.com/speed/pagespeed/insights?
-
这是一个过时的答案。
@import按顺序加载，最好避免：varvy.com/pagespeed/avoid-css-import.html 目前加载 Google 字体的首选（和默认）方式是使用<link>。 -
当您开始使用 SEO 并开始使用 Google PageSpeed 洞察力优化您的页面速度时，您会后悔的。改用
<link>并优化它的交付。
您还可以使用@font-face 链接到 URL。 http://www.css3.info/preview/web-fonts-with-font-face/
CMS 是否支持 iframe？您也可以将 iframe 放入内容的顶部。这可能会更慢 - 最好将其包含在您的 CSS 中。
【讨论】：
-
iframe 为所有内容带来了完全不同的空间。我认为这行不通。
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
最好不要使用@import。只需在布局的头部使用link 元素，如上所示。
【讨论】：
-
您能否详细说明为什么“最好不要使用”？我搜索了这个问题，因为我想知道哪种方法被认为是最好的。
-
我在使用 @import 时遇到了 Internet Explorer 问题。有时它只是不读它。
-
他特别说不能在他的header中使用标签。
-
+1 用于使用“链接”，因为它不会阻止并行加载其他外部文件。 'import' 将阻止并行加载其他外部文件。
-
通过使用@import，您可以使字体成为 CSS 样式的一部分，而不是 HTML 标记，这在语义上感觉更正确，并且您可以通过 CSS 替换您网站上的字体。但正如 Chuck 评论的那样，您似乎需要稍微加快速度。也许记录加载时间，然后根据具体情况决定。请注意，对于 SVG @import is the only way that works AFAIK。
在您的 CSS 文件中添加以下代码以导入 Google Web 字体。
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
将 Open+Sans 参数值替换为您的字体名称。
您的 CSS 文件应如下所示：
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
font-family: 'Open Sans',serif;
}
【讨论】：
我们可以在 css3 中轻松做到这一点。我们必须简单地使用@import 语句。下面的视频很容易地描述了如何做到这一点。所以请继续注意。
【讨论】：
- 去https://fonts.google.com/
- 点击+添加字体
- 转到选定的字体 > 嵌入 > @IMPORT > 复制 url 并将 .css 文件粘贴到正文标记上方。
- 完成了。
【讨论】：
下载字体ttf/其他格式文件，然后简单地添加这个CSS代码示例：
@font-face { font-family: roboto-regular;
src: url('../font/Roboto-Regular.ttf'); }
h2{
font-family: roboto-regular;
}【讨论】：
-
我喜欢这个答案，因为与所有导入和链接答案不同，这不会让 Google 跟踪您的用户 IP 地址。这在欧洲将违反 GDPR
点击链接
https://developers.google.com/fonts/docs/getting_started
要将其导入样式表使用
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
【讨论】：
<link href="https://fonts.googleapis.com/css?family=(any font of your
choice)" rel="stylesheet" type="text/css">
要选择字体，您可以访问链接：https://fonts.google.com
写下您从网站中选择的字体名称，不包括括号。
例如您选择 Lobster 作为您选择的字体，
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"
type="text/css">
然后您可以在整个 HTML/CSS 文件中正常使用它作为字体系列。
例如
<h2 style="Lobster">Please Like This Answer</h2>
【讨论】：
除了以上答案，还请考虑这个网站； https://google-webfonts-helper.herokuapp.com/fonts
主要优势：
- 允许您自行托管这些 google 字体以缩短响应时间
其他优点：
- 选择您的字体
- 选择你的字符集
- 选择您的字体样式/粗细
- 选择您的目标浏览器（现代首选）
- 然后您将获得 CSS sn-ps（添加到您的 css 样式表）以及字体文件的 zip 以包含在您的项目文件夹中（例如 css_fonts）
在文件'your_css_theme.css'中添加
/* open-sans-regular - latin - modern browsers */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('css_fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('css_fonts/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
font-family: 'Open Sans',sans-serif;
}
【讨论】：
-
这也允许您首先加载
font-weight: 400，然后使用相同的代码（不带参数）加载字体的其余部分。这样可以更快地显示，如果您最终不需要整个字体，则可以使用更小的 CSS 文件。 -
我不建议使用
local部分，因为人们很少安装所需的字体，即使这样，大多数情况下也会从其他地方获得不同版本的字体。开发和调试也更加困难，特别是如果您安装了字体，并且由于某些服务器故障或其他错误，可能会因为某种原因无法为用户加载字体。
自 2015 年以来，Google 方面发生了一些变化。我在找到它时遇到了一些困难，所以想包含新方法：
- 在所需字体页面上向下滚动
- 点击字体名称旁边的小加号图标
- 嵌入链接和其他选项将出现在网页右侧的“已选择家庭”对话框中。
【讨论】：