css - 如何将多个字体添加到单独的标签中？

Question

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

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

Answer 1

How do You Add Several font-faces to Separate Tags?

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