对于我正在开发的网站,客户希望使用 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?
最佳答案
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;
}
关于css - 如何将多个字体添加到单独的标签中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12203675/