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

它不起作用，因为src规则中的@font-face属性必须引用字体文件，而不是CSS文件。

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

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

＆＃13;

<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

＆＃13;

使用纯CSS导入字体

1 个答案: