本地开发时在 CSS 中选择特定样式的字体

Question

当我在本地构建时，我不需要担心 webfonts。为了更新实时站点，我需要做的就是将修改后的样式表上传到服务器。

我的电脑上安装了 Trade Gothic LT Std 字体，并设置了一些元素的样式，如下所示：

.element {
    font-family: Trade Gothic LT Std;
}

但是我需要将一些元素设置为Trade Gothic LT Std Bold Condensed No. 20。我试过这样指定：

h1, h2, h3, h4, h5, h6 {
    font-family: "Trade Gothic LT Std Bold Condensed No. 20";
}

但没有运气。所以我也尝试过这样的事情：

h1, h2, h3, h4, h5, h6 {
    font-family: "Trade Gothic LT Std";
    font-weight: bold;
    font-style: "Bold Condensed No. 20";
}

但我得到的只是标准的Trade Gothic LT Std 字体。

谁能看到我做错了什么？如果有帮助，这里是字体信息

PostScript 名称 TradeGothicLTStd-BdCn20

全名 Trade Gothic LT Std Bold Condensed No. 20

Family Trade Gothic LT Std

Style Bold Condensed No. 20

Answer 1

如果不是系统安装的字体，则必须包含文件的源代码。

@font-face {
font-family: fontname;
src: url(localfonturl);
}

然后在任何你想要的地方使用名称'fontname'。

div {
font-family: fontname;
}

尝试 .ttf 类型的字体文件，因为它将支持所有主流浏览器。