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

Question

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

我的电脑上安装了 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 name TradeGothicLTStd-BdCn20

Full name 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 类型的字体文件，因为它会支持所有主流浏览器。