我已经在我的计算机上下载了一个 .ttf 文件,其中包含我要使用的字体。我想做的是将它应用到我的 html 页面。我正在使用一个单独的 .css 样式表,在我的 html 文件的头部部分有一个链接。
我该如何应用这个自定义字体?我尝试使用 @font-face 和我的 .css 文件中有以下代码,但它不起作用:
@font-face {
font-family: "chosenNameForCustomFont";
src: url("fonts/customFontName");
}
p {
font-family: chosenNameForCustomFont;
}
html文件中的段落还是会正常,没有字体。 如果我将上面的代码放在实际的 html 文件中,在“style”标签中,它就可以工作。那我做错了什么?
最佳答案
通常,当我需要这样做时,我会使用 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;
}
请记住,您使用的字体必须在法律上符合网页嵌入的条件。
希望对你有帮助
关于html - 在单独的 .css 样式表中正确使用自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33714726/