似乎无法改变字体类型

我有杂项文件的文件一对夫妇的自定义字体：似乎无法改变字体类型

我的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的字体不会改变。

我也跟着这样的：

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

来源

2015-09-07 KeyboardNinja

你把所有的字体文件夹* CSS /字体里面*？ – Blip

如果您正在使用调试器为您的浏览器，您将选择任何错误/丢失的文件等。对开发者来说，这是一个很棒 – jtheman

index.html和style.css位于主项目目录中。那个叫做“字体”的另一个目录里面包含了.otf文件？ – KeyboardNinja

尝试使用所有类型，如杂项文件，.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

来源

2015-09-07 12:44:54

似乎无法改变字体类型

回答

相关问题