导入纯 CSS 的字体

Question

我正在尝试在我的网站上使用 Google 字体。如果我将此代码放入每个 HTML 文件中，它就会起作用。

<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:700' rel='stylesheet' type='text/css'>

我想提高效率，只访问主 CSS 文件中的字体，但我不明白为什么没有 HTML 部分字体不显示。

@font-face {
    font-family: "Cinzel Decorative";
    src: url("http://fonts.googleapis.com/css?family=Cinzel+Decorative:700") }
html, body {
    background-color: #C00;
    color: #600;
    font-family: "Cinzel Decorative", serif;
    font-size: 112.5%;
    text-align: center }

Answer 1

这样不行，因为 @font-face 规则中的 src 属性必须引用 字体文件 ，而不是一个 CSS 文件。

如果你真的想在你自己的代码中使用 @font-face，你需要下载字体，使用它创建不同的格式，例如FontSquirrel webfont generator，它还会生成一个包含所需代码的示例文件，并将相关文件上传到您的服务器。

如果您只想在 CSS 中执行操作而不是使用 link 元素，请在样式 sheet 的开头使用 @import 规则。不过，这并不意味着任何效率提升。示例：

<style>
@import url("http://fonts.googleapis.com/css?family=Cinzel+Decorative:700");
html, body {
    background-color: #C00;
    color: #600;
    font-family: "Cinzel Decorative", serif;
    font-size: 112.5%;
    text-align: center;
    font-weight: 700; /* should be used since you refer to 700 weight typeface */
}
</style>
Hello world

导入纯 CSS 的字体

Importing a font with pure CSS

html

css

hyperlink

fonts

font-family