我有一个名为 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;
}
这有点多余。有没有更简洁的方法来做到这一点？
最佳答案
不幸的是@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>您的文档。
关于css - 如何简化CSS中的字体导入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17772945/