使用字体真棒字体

Question

我正在寻找这样的东西

@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>

我想使用 CSS 属性加载字体文件。并为字体图标创建自定义 class。以上没有工作。它无法加载相应的图标。相反，它显示栏

Answer 1

尝试打开 Javascript 控制台并将出现的错误消息添加到您的问题中。

When I tried your code in JSFiddle，所需要的只是 maxcdn 链接是基于 SSL 的 HTTPS 链接，而不是不安全的 HTTP 链接。

这可能是您问题的解决方案，但如果没有控制台错误输出，则很难判断。

@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";
}

Answer 2

如果您正在寻找 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">

如果您想加载自己的自定义字体，请试试这个-

@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');
}

如您所见，我为每个字体粗细创建了另一个具有相同字体系列名称的@font-face。

Answer 3

使用 cdn link 按以下方式创建 @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");
}

Answer 4

请注意，如果您的页面中包含 font-awesome.min.css（如 Font-awesome 的 documentation 中所述），那么它已经包含以下 @font-face，位于文件，您不需要添加自己的：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
  url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
  url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
  url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
  url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

使用字体真棒字体

Font awesome using font face

html

css

font-face

font-awesome