Question

我有一个字体，即SourceSansPro，我将它包含在我的css中，如下所示：

@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;
}

这是多余的。有没有更简洁的方法来做到这一点？

Answer 1

不幸的是@ font-face语法不是很灵活。在这种情况下，你受浏览器开发人员的支配。但是，您可以将字体划分为fonts.css文件，然后执行导入：

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

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

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

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

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

到您文档的<head>。

Answer 2

它本质上不是多余的，因为您使用三种字体并且它们需要单独声明。但是，您可以省略声明font-style: normal和font-weight: normal，因为它们对应于默认值。

另一方面，该代码仅适用于支持OTF作为可下载字体格式的浏览器。使用例如http://www.fontsquirrel.com/tools/webfont-generator生成其他格式和代码以供其使用。

font-weight: lighter可能适用于大多数情况，但它不合逻辑（当你应该指定实际重量时使用相对关键字）并且应该被font-weight: 200替换，这对应于实际的重量字体

Answer 3

嗯，你显然需要更改每个字体的字体系列名称，否则我认为让它们全部相同会使它们发生冲突。至少我会这么认为。我从来没有遇到过它，但如果它不起作用，那就去做吧。但如果没有，请忽略这一点。

至于@ font-face简单，@ font-face所需的唯一真正规格是font-family和src。那显然是字体样式。所以任何其他网页样式，您可以留下html样式或CSS。

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

然后，您可以在span或css类中设置字体样式。

<span style="font-family: SourceSansPro; font-weight: bold; font-style: italic;">Styled Font</span>
<div style="font-family: SourceSansPro; font-weight: bold; font-style: italic;">Styled Font</div>
<div class="myspecificstyle">Styled Font</div>

如果您有很多字体，我会将它们全部放在一个css文件中，然后将其链接到您正在使用它们的页面。

<link rel="stylesheet" type="text/css" href="myfonts.css">

如何在css中简化字体导入

3 个答案: