似乎无法改变字体类型
问题描述:
我有杂项文件的文件一对夫妇的自定义字体:似乎无法改变字体类型
我的index.html文件看起来是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="css/style.css" >
</head>
<body>
<h3 style = "font-family: customBold;">Hello</h3>
<h3 style = "font-family: customLight;">Hello</h3>
<h3 style = "font-family: customRegular;">Hello</h3>
<h3 style = "font-family: customThin;">Hello</h3>
</body>
</html>
我的style.css看起来是这样的
@font-face {
font-family: customBold;
src: url(fonts/Custom-Bold.otf);
}
@font-face {
font-family: customLight;
src: url(fonts/Custom-Light.otf);
}
@font-face {
font-family: customRegular;
src: url(fonts/Custom-Regular.otf);
}
@font-face {
font-family: customThin;
src: url(fonts/Custom-Thin.otf);
}
但是,h3的字体不会改变。
我也跟着这样的:
答
尝试使用所有类型,如杂项文件,.eot,.TTF等添加此类型CSS文件。
很少的类型的不同的浏览器不支持。考虑http://caniuse.com/#feat=ttf
查找到下面的代码,我们如何才能增加大家对不同的浏览器工作所需的格式。从https://css-tricks.com/snippets/css/using-font-face/
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
参考参考此链接以获取更多信息(类似的问题),Using .otf fonts on web browsers
你把所有的字体文件夹* CSS /字体里面*? – Blip
如果您正在使用调试器为您的浏览器,您将选择任何错误/丢失的文件等。对开发者来说,这是一个很棒 – jtheman
index.html和style.css位于主项目目录中。那个叫做“字体”的另一个目录里面包含了.otf文件? – KeyboardNinja