Question

我正在尝试创建我的第一个网站，我正在尝试使用fontsquirrel中的字体。

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

当字体系列包含多种样式时，我在编写CSS代码方面遇到了很多问题。

让我们以LM Mono 10 Regular和Special Elite为例：

我的特殊精英代码如下，效果很好：

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

这种格式很容易使用，因为特殊的elite font-family只有一种样式。

但是当我尝试在具有多个样式的字体系列（例如LM Mono 10系列）上调整此格式时，它根本不起作用....

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

我不知道错误是在我指的是字体系列的方式上，还是我写错了网址...你能否在回复中提供一个代码示例？

让我们说“Latin Modern Mono Light 10 Regular”。 font-weight和font-style属性将如何变化？我只是不明白......

Answer 1

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

这是Italic版本：

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

Answer 2

对于Regular和 Italic 版本：

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

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

2 个答案: