如何使用字体系列中的特定样式？

我正在尝试创建我的第一个网站，并且正在试验来自fontsquirrel的字体。如何使用字体系列中的特定样式？

唯一的问题是，我只能使用一些我通过网站下载的字体。

当我的字体家族包括多个样式时，我在正确编写CSS代码时遇到了很多问题。

让我们例如LM单10常规和特种精英例如：

我对特种精英代码如下，它的伟大工程：

@font-face { 
    font-family: 'specialelite'; 
    src: url('specialelite.eot'); 
    src: url('specialelite.eot?#iefix') format('embedded-opentype'), 
    url('specialelite.woff2') format('woff2'), 
    url('specialelite.woff') format('woff'), 
    url(' specialelite.ttf') format('truetype'), 
    url(' specialelite.svg# specialelite') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

和

.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}

这种格式很容易处理，因为特殊的精英字体家族只有一种风格。

但..当我试图适应在FONT-FAMILY有一个以上的样式，比如例如LM单声道10家，它根本不起作用这种格式....

http://www.fontsquirrel.com/fonts/Latin-Modern-Mono

我不知道错误是指我指的是字体家族的方式，还是我写的url错误......请您在回复中提供一个代码示例吗？

让我们来说说“拉丁现代单色灯10普通”。 font-weight和font-style属性将如何改变？我只是不明白...

来源

2016-02-29 Alexandros

当我在您提供的链接下载资源时，它将每种字体样式显示为完全不同的字体系列。

这是斜体版本：

@font-face { 
    font-family: 'latin_modern_mono10_italic'; 
    src: url('lmmono10-italic-webfont.eot'); 
    src: url('lmmono10-italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('lmmono10-italic-webfont.woff') format('woff'), 
     url('lmmono10-italic-webfont.ttf') format('truetype'), 
     url('lmmono10-italic-webfont.svg#latin_modern_mono10_italic') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

}

这是普通版本：

@font-face { 
    font-family: 'latin_modern_mono10_regular'; 
    src: url('lmmono10-regular-webfont.eot'); 
    src: url('lmmono10-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('lmmono10-regular-webfont.woff') format('woff'), 
     url('lmmono10-regular-webfont.ttf') format('truetype'), 
     url('lmmono10-regular-webfont.svg#latin_modern_mono10_regular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

}

为了使用这些字体原样，则需要指定适当的font-family每当你使用它们。

例如：

.fifth { 
    font-family: 'latin_modern_mono10_regular'; 
    font-weight: normal; 
    ... 
}

或

.fifth { 
    font-family: 'latin_modern_mono10_italic'; 
    font-weight: normal; 
    ... 
}

来源

2016-02-29 19:38:59 Quantastical

这是一个很好的答案Quantastical。你为什么在那里使用“webfont”？特殊的精英字体在没有webfont措辞的情况下工作。 – Alexandros

....但它仍然无法工作....我在这里失去了我的头脑...我有许可证和字体都在与HTML/CSS文档相同的文件...这里发生了什么？这感觉就像一个暮光之城片段... – Alexandros

更新与您遇到问题的字体的实施问题。 – Quantastical

定期和斜体版本：

@font-face { 
    font-family: 'specialelite'; 
    src: url('specialelite.eot'); 
    src: url('specialelite.eot?#iefix') format('embedded-opentype'), url('specialelite.woff2') format('woff2'), url('specialelite.woff') format('woff'), url(' specialelite.ttf') format('truetype'), url(' specialelite.svg# specialelite') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'specialelite'; 
    src: url('specialelite_italic.eot'); 
    src: url('specialelite_italic.eot?#iefix') format('embedded-opentype'),  url('specialelite_italic.woff2') format('woff2'), url('specialelite_italic.woff') format('woff'), url(' specialelite_italic.ttf') format('truetype'), url(' specialelite_italic.svg# specialelite') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
}

现在，你可以用这个常规：font-style: normal

.fifth {font-family: 'specialelite'; font-style: normal; font-size: 16px; color:black;}

或本为斜体：font-style: italic

.fifth {font-family: 'specialelite'; font-style: italic; font-size: 16px; color:black;}

来源

2016-02-29 21:09:16 naser

ty naser，但是我对LM家族有问题，不是特殊的精英;） – Alexandros

如何使用字体系列中的特定样式？

回答

相关问题