css - 如何添加多个字体来分隔标签？

对于我正在开发的网站，客户希望使用Roboto（由Google提供）作为主要字体。页面上的几个元素使用不同样式的Roboto，例如Roboto Light的Roboto Thin。但是，我使用@ font-face选择器使浏览器在Roboto中呈现文本。我的问题是设计需要使用不同的权重，而不是在标准Roboto文本中使用。我不确定我是否足够清楚。如果您需要澄清或具体示例，请询问。

PS：我发现了一个类似问题的相似线索，但是，它们使用系统字体和@ font-face一起使用。 Using @fontface, how do I apply different styles to different font-families?

最佳答案

如何添加多个字体来分隔标签？

@font-face {
    font-family: 'Crystal';
    src: url('../fonts/crystalnormal.eot');
    src: url('../fonts/crystalnormal.eot?#iefix') format('embedded-opentype'),
         url('../fonts/crystalnormal.woff') format('woff'),
         url('../fonts/crystalnormal.ttf') format('truetype'),
         url('../fonts/crystalnormal.svg#crystalnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FreestyleC';
    src: url('../fonts/freestyle.eot');
    src: url('../fonts/freestyle.eot?#iefix') format('embedded-opentype'),
         url('../fonts/freestyle.woff') format('woff'),
         url('../fonts/freestyle.ttf') format('truetype'),
         url('../fonts/freestyle.svg#freestyle') format('svg');
    font-weight: normal;
    font-style: normal;
}

foo {
    font-family:FreestyleC;
}
bar {
    font-family:Crystal;
}

关于css - 如何添加多个字体来分隔标签？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12203675/