Html 字体真棒使用字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43497820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font awesome using font face
提问by ranjith
I'm looking for something like this
我正在寻找这样的东西
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
.myClass:before {
font-family: FontAwesome;
content: "\f024";
}<a class="myClass" href="#">This is a link</a>I want to load font file using CSS property. And to create a custom class for font icon. The above didn't work. It failed to load respective icon. Instead it show bar
我想使用 CSS 属性加载字体文件。并为字体图标创建自定义类。以上没有奏效。无法加载相应的图标。相反，它显示栏
回答by Joseph Marikle
Try opening the Javascript console and adding the error messages that appear there to your question.
尝试打开 Javascript 控制台并将出现的错误消息添加到您的问题中。
When I tried your code in JSFiddle, all it needed was for the maxcdn links to be SSL-based HTTPSlinks as opposed to insecure HTTP links.
当我在 JSFiddle 中尝试您的代码时，它所需要的只是让 maxcdn 链接成为基于 SSL 的 HTTP S链接，而不是不安全的 HTTP 链接。
That may be the solution to your issue, but it's hard to tell without the console error output.
这可能是您问题的解决方案，但如果没有控制台错误输出，就很难判断。
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
.myClass:before {
font-family: FontAwesome;
content: "\f024";
}
回答by KARTHIKEYAN.A
use cdn link to create @font-faceas following way
使用cdn链接创建@font-face如下方式
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-display: auto;
font-style: normal;
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2");
}
回答by Netanel Perez
If you are looking for FontAwesome then you're probably looking for this-
如果您正在寻找 FontAwesome 那么您可能正在寻找这个 -
<link rel="stylesheet" id="champion-fontawesome-css" href="wp-content/themes/bla/inc/font-awesome-4.7.0/css/font-awesome.min.css?ver=4.7.3" type="text/css" media="all">
If you are looking to load a custom font of your own then try this-
如果您想加载自己的自定义字体，请尝试以下操作-
@font-face {
font-family: 'FFDINRoundWebPro';
font-weight: normal;
font-style: normal;
src: url('assets/fonts/3103D9_0_0.eot');
src: url('assets/fonts/3103D9_0_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_0_0.woff2') format('woff2'), url('assets/fonts/3103D9_0_0.woff') format('woff'), url('assets/fonts/3103D9_0_0.ttf') format('truetype');
}
@font-face {
font-family: 'FFDINRoundWebPro';
font-weight: 700;
src: url('assets/fonts/3103D9_1_0.eot');
src: url('assets/fonts/3103D9_1_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_1_0.woff2') format('woff2'), url('assets/fonts/3103D9_1_0.woff') format('woff'), url('assets/fonts/3103D9_1_0.ttf') format('truetype');
}
@font-face {
font-family: 'FFDINRoundWebPro';
font-weight: 500;
src: url('assets/fonts/3103D9_2_0.eot');
src: url('assets/fonts/3103D9_2_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_2_0.woff2') format('woff2'), url('assets/fonts/3103D9_2_0.woff') format('woff'), url('assets/fonts/3103D9_2_0.ttf') format('truetype');
}
@font-face {
font-family: 'FFDINRoundWebPro';
font-weight: 300;
src: url('assets/fonts/3103D9_3_0.eot');
src: url('assets/fonts/3103D9_3_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_3_0.woff2') format('woff2'), url('assets/fonts/3103D9_3_0.woff') format('woff'), url('assets/fonts/3103D9_3_0.ttf') format('truetype');
}
As you can see, for each font-weight i create another @font-face with the same font-family name.
如您所见，对于每个字体粗细，我创建了另一个具有相同字体系列名称的 @font-face。
