CSS - 在一个 CSS 文件中包含多种字体答案

【问题标题】：CSS - Include multiple fonts in one CSS fileCSS - 在一个 CSS 文件中包含多种字体
【发布时间】：2015-06-29 18:14:40
【问题描述】：

如何在 CSS 文件中添加多个字体？我尝试了以下方法，但似乎不起作用。

@font-face {
    font-family: 'Inspira_Reg';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Bold';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Italic';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Medium';
    src: url('http://myfonturl.com');
}

然后要使用字体，我只需在 CSS ID 中设置 font-family 属性，如下所示：

#titleSection {
   margin: 25px 5px auto auto;
   font-size: 11px;
   text-align:left;
   font-family: 'Inspira_Reg';
   color: black;
}

但它似乎不起作用。该字体似乎没有被识别，它似乎使用 Arial 或任何默认值。

我使用的是最新版本的谷歌浏览器，我使用的字体类型是 TTF 文件。

谢谢，丹。

【问题讨论】：

您从哪个 URL 加载字体？
是的，愚蠢的问题，就像上面的那个人一样，这些 URL 真的正确还是为了演示目的而更改它们？
知道您从中加载字体的 URL 很重要，因为问题可能只是一个简单的扩展问题，也可能是更多问题。
打开控制台、网络标签，查看字体是否加载
@JoeCorby 我已经更改了用于演示目的的 URL。我使用的真实 URL 可以正常工作，我已经对其进行了测试。

标签： html css google-chrome fonts truetype

【解决方案1】：

@font-face 规则允许在网页上加载自定义字体。添加到样式表后，该规则会指示浏览器下载托管它的字体，然后按照 CSS。

为了跨浏览器的兼容性，font-face 似乎需要多个定义。例如，这是来自CSS-tricks 的文章：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

使用此方法的替代方法是使用导入（需要将其放在 css 文件的开头）

类似：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

然后可以通过以下方式使用：

font-family: 'Open Sans', sans-serif;

这可以用于多种字体，方法是在 CSS 的顶部导入它们，并使用 font-family 声明。

对于许多不同的字体，以及使用它们的更多信息，你可以看看here on google fonts

【讨论】：

【解决方案2】：

除了字体 url 之外，所有的东西看起来都不错。您应该提供字体的本地地址。让我给你一个完整的例子哥们：

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

</body>
</html>

所以把你的字体放在 html 文件夹中并使用代码:)

【讨论】：

非常感谢您的帮助和示例代码。它现在工作:)
很高兴能帮上忙 :)
哦，您确实帮了大忙，非常感谢先生。在接下来的几天里，我将投票支持你所有的答案和问题，以表示感谢:)
我正在为遇到同样问题的朋友参考您的答案。不管怎样，我刚注意到你的伊朗人！！萨拉姆，哈雷肖马？ :)
@Dan 是的，我是 :) mer30 aziz。 movafagh bashi :)