Question

我正在寻找类似的东西

＆＃13;

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

＆＃13;

<a class="myClass" href="#">This is a link</a>

＆＃13;

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

Answer 1

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

When I tried your code in JSFiddle，所有需要的是maxcdn链接是基于SSL的HTTP S 链接，而不是不安全的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

使用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");
}

Answer 3

请注意，如果在您的页面中包含 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;
}

Answer 4

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

字体很棒使用字体

4 个答案: