在单独的.css样式表中正确使用自定义字体
在单独的.css样式表中正确使用自定义字体
提问于 2015-11-14 23:45:50
我已经在计算机上下载了一个.ttf文件，其中包含了我想使用的字体。我想要做的是将它应用到我的html页面。我正在使用一个单独的.css样式表，在我的html文件的head部分中有一个链接。
具体如何应用此自定义字体？我尝试使用@字体-face，在我的.css文件中有以下代码，但是它不能工作：
@font-face {
font-family: "chosenNameForCustomFont";
src: url("fonts/customFontName");
}
p {
font-family: chosenNameForCustomFont;
}html文件中的段落仍然是正常的，没有字体。如果我把上面的代码放在实际的html文件中，在“样式”标签中，它就能工作了。那我做错什么了？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-15 00:01:26
通常，当我需要这样做时，我会使用方格松鼠发生器。您需要上传您需要使用的字体，它将生成一个使用它的示例。
生成字体工具包之后，您将得到一个包含多个文件的包：
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;
}请记住，您正在使用的字体需要合法的网页嵌入资格。
希望它能帮上忙
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33714726
复制相关文章
相似问题
腾讯云开发者
