Question

我目前正在使用Wordpress制作网站。我遇到的问题是使用字体。我在这里找不到问题的答案，所以我决定问问自己。有人发送字体给我使用，但问题是当我打开文件时，该字体有不同的样式。更清楚：字体是Avenir Next，不同的款式是Avenir Next Bold，Avenir Next Medium，Avenir Next Ultra Light。

它不是谷歌字体。我试图用@ font-face包含它：

@font-face {
    font-family: Avenir Next;  
    src: url('http://localhost/cultuurfonds/wp-
         content/themes/monstroid/fonts/Avenir-Next.ttf');
    font-weight: bold;
    font-weight: 700;
}

@font-face {
    font-family: Avenir Next Medium;  
    src: url('http://localhost/cultuurfonds/wp-
         content/themes/monstroid/fonts/Avenir-Next.ttf');
    font-weight: normal;
    font-weight: 400;
}

有了这个，我可以使用Avenir Next（非常大胆，所以我不想使用它），但Avenir Next Medium不起作用。

这是付费字体，但我不是购买它的人。那个人把字体文件（Avenir-Next.ttf）发给我，所以这就是我必须要处理的。

我更喜欢不使用插件来包含它。无论如何，我无法找到一个好的插件。但如果除了使用插件之外别无其他方式，我愿意使用它。

我希望我的问题很明确（这里的第一个问题）。

Answer 1

如果要从本地文件加载字体，首先必须使用https://www.web-font-generator.com/之类的工具生成不同格式的字体。

然后你必须加载所有格式的字体

@font-face {
    font-family: 'AvenirNextLTPro';
    src: url('fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),  
        url('fonts/AvenirNextLTPro-Regular.otf')  format('opentype'),
        url('fonts/AvenirNextLTPro-Regular.woff') format('woff'), 
        url('fonts/AvenirNextLTPro-Regular.ttf')  format('truetype'), 
        url('fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNextLTPro';
    src: url('fonts/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'),  
        url('fonts/AvenirNextLTPro-Demi.woff') format('woff'), 
        url('fonts/AvenirNextLTPro-Demi.ttf')  format('truetype'),
        url('fonts/AvenirNextLTPro-Demi.svg#AvenirNextLTPro-Demi') format('svg');
    font-weight: 500;
    font-style: normal;

}

正如您所看到的，font-family名称相同，但字体重量大小不同（Regular - 400和Demi - 500）

然后，当你想在不同的元素中使用不同的字体权重时，你必须声明它：

p {
  font-family: 'AvenirNextLTPro';
  font-weight: 400;
}

h1 {
  font-family: 'AvenirNextLTPro';
  font-weight: 500;
}

如何在一个字体文件中包含不同的字体权重？

1 个答案: