0

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

PS：我发现了一个关于类似问题的类似线程，但是，他们使用系统字体和他们的@font-face。 使用@fontface，我如何将不同的样式应用于不同的字体系列？

4

1 回答 1

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;
}
于 2012-08-30T19:03:26.970 回答