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

Question

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

我该如何应用这个自定义字体？我尝试使用@font-face 和我的 .css 文件中有以下代码，但它不起作用:

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

p {
    font-family: chosenNameForCustomFont;
}

html文件中的段落还是会正常，没有字体。如果我将上面的代码放在实际的 html 文件中，在“style”标签中，它就可以工作。那我做错了什么？

Answer 1

通常，当我需要这样做时，我会使用 fontsquirrell generator .您需要上传您需要使用的字体，它会生成一个示例来使用它。

生成字体包后，您将获得包含多个文件的 bundle :

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;

}

请记住，您使用的字体必须在法律上符合网页嵌入的条件。

希望对你有帮助