字体神器使用font-face

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属性加载字体文件，并创建一个自定义的字体图标类。但以上方法未成功加载相应的图标，而是显示了空格符。

- ranjith

---

似乎在这里工作... 你期望有一个标志吗？ - Michael

然而，如果在StackOverflow上切换到HTTPS，则无法工作。这是因为如果您通过HTTPS连接，则会拒绝从仅为HTTP的其他任何站点加载资源。 - Michael

Answer 1

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

当我在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";
}

- Joseph Marikle

---

或者使用协议相对的URL，如 url("//maxcdn... https://jsfiddle.net/c4w2uc61/1/ - Heretic Monkey

@MikeMcCaughan 但是不使用HTTPS有什么理由吗？ - Michael

如果您使用协议相对链接，您可以在本地（可能没有启用HTTPS）和远程使用相同的代码。 - Heretic Monkey

了解此功能很重要，但不要随意使用它。如果您期望资源是安全的，请在代码中坚持使用它。 https://www.paulirish.com/2010/the-protocol-relative-url/ - Svend

良好的浏览器兼容性： font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 兼容模式 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* 超现代浏览器 */ url('webfont.woff') format('woff'), /* 相当现代的浏览器 */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* 旧版 iOS */ }``` - Watchmaker

Answer 2

请注意，如果您在页面中包含font-awesome.min.css（如Font-awesome的文档中所述），则它已经在文件开头包含以下@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;
}

- Hooman Bahreini

Answer 3

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

- KARTHIKEYAN.A

---

可能对于某些网站来说，仅使用woff2格式仍然存在风险。请记住： font-family: "FontAwesome"; src: url("../whatever.eot"); /* IE9 兼容模式 */ src: url("../whatever.woff2") format("woff2"); /* 超级现代浏览器 */ src: url("../whatever.woff") format("woff"); /* 相当现代的浏览器 */ src: url("../whatever.svg") format("svg"); /* 旧版iOS */ src: url("../whatever.ttf") format("truetype"); /* Safari, Android, iOS */ }``` - Watchmaker

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。

- Netanel Perez

---

我认为这并没有回答问题，我的下投票是因为什么。 - Michael

这不是我的问题。 - Michael