294

我正在使用只能访问 CSS 文件的 CMS。所以，我不能在文档的 HEAD 中包含任何东西。我想知道是否有办法从 CSS 文件中导入网络字体？

4

12 回答 12

452

使用@import方法：

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

显然，"Open Sans" ( Open+Sans) 是导入的字体。所以用你的替换它。+如果字体名称有多个单词，请像我一样，通过在每个单词之间添加一个符号来对其进行 URL 编码。

确保将 放在@importCSS 的最顶部，在任何规则之前。

Google Fonts 可以自动@import为您生成指令。选择字体后，单击(+)它旁边的图标。在左下角，将出现一个名为“1 Family Selected”的容器。单击它，它将展开。使用“自定义”选项卡选择选项，然后切换回“嵌入”并单击“嵌入字体”下的“@import”。<style>将标签之间的 CSS 复制到样式表中。

于 2013-02-03T20:00:41.193 回答
89 
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

最好不要使用@import。只需link在布局的头部使用元素，如上所示。

于 2015-07-01T21:52:17.313 回答
56

下载字体 ttf/其他格式文件，然后简单地添加这个 CSS 代码示例：

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

于 2017-04-23T15:01:38.637 回答
45

在您的 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;
}
于 2015-12-13T11:45:29.073 回答
20
  1. 只需访问https://fonts.google.com/
  2. 通过单击+添加字体
  3. 转到选定的字体 > 嵌入 > @IMPORT > 复制 url 并将 .css 文件粘贴到正文标记上方。
  4. 完成。
于 2016-10-11T07:38:48.080 回答
20

除了上述答案，还要考虑这个网站； https://google-webfonts-helper.herokuapp.com/fonts

主要优势：

  • 允许您自行托管这些谷歌字体以获得更好的响应时间

其他优点：

  • 选择你的字体
  • 选择你的字符集
  • 选择你的字体样式/重量
  • 选择您的目标浏览器（现代首选）
  • 你得到 CSS 片段（添加到你的 css 样式表）加上一个字体文件的压缩包，以包含在你的项目文件夹中（比如 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;  
 }
于 2018-09-11T08:16:24.243 回答
12

使用标签@import

@import url('http://fonts.googleapis.com/css?family=Kavoon');
于 2013-02-03T19:59:47.893 回答
4

您还可以使用 @font-face 链接到 URL。 http://www.css3.info/preview/web-fonts-with-font-face/

CMS 是否支持 iframe？您也可以将 iframe 放入内容的顶部。这可能会更慢 - 最好将其包含在您的 CSS 中。

于 2013-02-03T20:04:09.570 回答
4 
<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>
于 2018-07-07T10:23:26.083 回答
3

只需通过链接

https://developers.google.com/fonts/docs/getting_started

要将其导入样式表，请使用

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
于 2017-06-12T06:46:00.947 回答
1

我们可以在 css3 中轻松做到这一点。我们必须简单地使用@import 语句。以下视频很容易地描述了如何做到这一点。所以请继续注意。

https://www.youtube.com/watch?v=wlPr6EF6GAo

于 2016-05-26T09:20:54.503 回答
1

自 2015 年以来，谷歌方面发生了一些变化。我很难找到它，所以想包括新方法：

  1. 在所需的字体页面上向下滚动
  2. 单击字体名称旁边的小加号图标
  3. 嵌入链接和其他选项将出现在网页右侧的“选定家庭”对话框中。
于 2021-05-12T12:28:30.017 回答