Css 如何将多个字体面添加到单独的标记中？

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

PS：我发现了一个关于类似问题的类似线程，但是，他们使用系统字体和@font-face

如何将多个字体面添加到单独的标记中

---

我只是不明白你的问题。。。这是一个标准代码。。。请回答并接受要求！问题是，在所有其他程序中，所有的字体名称都被称为Roboto。我不得不去把名字从“Roboto”改成“Roboto（随便什么）”

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