在单独的.css样式表中正确使用自定义字体

Emilian Cebuc 发表于 Dev

埃米利安·宿雾

我已经在计算机上下载了包含要使用的字体的.ttf文件。我想做的就是将其应用于我的html页面。我正在使用单独的.css样式表，我的html文件的头部内部有一个链接。

我如何确切地应用此自定义字体？我尝试使用@ font-face，但我的.css文件中包含以下代码，但无法使用：

@font-face {
    font-family: "chosenNameForCustomFont";
    src: url("fonts/customFontName");
}

p {
    font-family: chosenNameForCustomFont;
}

html文件中的段落仍然是正常的，没有字体。如果我将上面的代码放在“ style”标记内的实际html文件中，则可以正常工作。那我在做什么错呢？

维尔索托比亚科

通常，当我需要执行此操作时，我会使用fontsquirrell生成器。您需要上载需要使用的字体，它将生成一个使用它的示例。

生成字体工具包后，您将获得包含多个文件的捆绑包：

font_name.eot
font_name.svg
font_name.ttf
font_name.woff
font_name.woff2
font_name-demo.html   <-- Open it
stylesheet.css

打开.html后，您将在示例页面中看到完美的字体。您需要将所有这些文件（.eot，.svg，.ttf，.woff，.woff2）复制到源文件夹中，并引用.css中的文件（也许您需要根据放置位置来编辑目录字体文件），就像stylesheet.css那样：

@font-face {
font-family: 'font_name';
src: url('/relative/path/font_name-webfont.eot');
src: url('/relative/path/font_name-webfont.eot?#iefix') format('embedded-opentype'),
     url('/relative/path/font_name-webfont.woff2') format('woff2'),
     url('/relative/path/font_name-webfont.woff') format('woff'),
     url('/relative/path/font_name-webfont.ttf') format('truetype'),
     url('/relative/path/font_name-webfont.svg#fontnameregular')     format('svg');
font-weight: normal;
font-style: normal;

}

请记住，您所使用的字体必须合法才能进行网络嵌入。

希望能帮助到你

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。