如何简化在css中的字体导入 [英] how to simplify font import in css

问题描述

我有一个字体SourceSansPro，我包括在我的css如下：

I have a font namely SourceSansPro, and I include it in my css as follows:

@font-face {
    font-family: "SourceSansPro";
    src: url("../font/SourceSansPro-Bold.otf");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro";
    src: url("../font/SourceSansPro-Regular.otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro";
    src: url("../font/SourceSansPro-Light.otf.otf");
    font-weight: lighter;
    font-style: normal;
}

这是多余的。

推荐答案

不幸的是，@ font-face语法不是很灵活。在这种情况下，你是浏览器开发人员的怜悯。然而，你可以将你的字体分割成一个fonts.css文件，只是做一个导入：

Unfortunately the @font-face syntax is not very flexible. You're at the mercy of the browser developers in this case. You can, however, segment your fonts into a fonts.css file and just do an import:

@import url('css/fonts.css');

另一个可能的解决方案是通过 Google的Font API 。这样，你不必担心CSS首先。您只需添加

Another possible solution would be to add the font via Google's Font API. That way, you don't have to worry about the CSS in the first place. You just add

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

到您的样式表。或者您可以添加

to your stylesheet. Or you can add

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

文件。

这篇关于如何简化在css中的字体导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！