CSS

Question

如何在 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 中设置字体系列属性，如下所示：

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

但是好像不行。字体似乎无法识别，它似乎使用 Arial 或任何默认字体。

我使用的是最新版本的 Google Chrome 并且我使用的字体类型是 TTF 文件。

谢谢，丹。

Answer 1

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the 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 的顶部导入它们，并使用字体系列声明。

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

Answer 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 文件夹并使用代码 :)

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

CSS - Include multiple fonts in one CSS file

html

fonts

google-chrome

truetype