我正在我的网站中使用名为 Roboto
的谷歌字体。
我需要 2 种类型:bold
和 regular
。
所以我检查了两种类型并按下了下载按钮:
但是在下载的 rar 文件中我得到了所有的字体样式(还有那些我没有选择的):
无论如何,我想测试常规字体:(字体现在在我的站点中,而不是从谷歌加载)。
(我使用字体转换器 (http://www.font2web.com/) 获得了其他扩展类型(eot、woff、svg))
所以我做到了:
<style type="text/css">
@font-face {
font-family: 'Roboto';
src: url('/font-face/Regular/Roboto-Regular.eot'); /* IE9 Compat Modes */
src: url('/font-face/Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font-face/Regular/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
url('/font-face/Regular/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/font-face/Regular/Roboto-Regularo.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body { font-family: 'Roboto', sans-serif; }
</style>
问题:
假设我想将 Roboto bold
样式应用于 div
。
我应该这样做吗:
div {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
或者我应该这样做(重新开始...)
@font-face {
font-family: 'Roboto-bold';
src: url('/font-face/Regular/Roboto-bold.eot'); /* IE9 Compat Modes */
...
}
然后
div { font-family: 'Roboto-bold', sans-serif; }
最佳答案
这是你必须做的:
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: /* links to the Regular files */;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: /* links to the Bold files */;
}
请注意如何在两个 @font-face
规则中使用相同的字体名称。现在浏览器知道字体“Roboto”有两种变体。浏览器会根据您的 CSS 自动选择最佳变体。所以,例如:
div {
font-family: Roboto, sans-serif;
font-weight: bold;
}
浏览器在这里选择了 Bold 字体文件。都是自动的。您只需确保正确设置了 @font-face
规则。
关于html - 导入 html 字体及其样式变体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17166060/