0

我有一个名为 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;
}

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

4

3 回答 3

3

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

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

另一种可能的解决方案是通过Google 的 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>您的文档。

于 2013-07-21T14:00:12.640 回答
0

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

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

可能在大多数情况下font-weight: lighter都有效，但它是不合逻辑的（当你应该指定实际重量时使用 relative 关键字）并且应该替换为font-weight: 200，它对应于字体的实际重量

于 2013-07-21T14:26:00.657 回答
0

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

至于@font-face 的简单性，@font-face 唯一真正需要的规范是 font-family 和 src。显然，这称为字体样式。因此，您可以将任何其他 Web 样式留给 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">
于 2013-07-21T14:27:12.750 回答