Question

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

PS：我发现了一个关于类似问题的类似线程，但是，他们使用系统字体与他们的@ font-face相结合。 Using @fontface, how do I apply different styles to different font-families?

Answer 1

如何为分离标签添加多个字体？

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

如何添加几个字体面来分离标签？

1 个答案: