javascript - 如何加载外部字体以用于我的网站？

Question

我正在尝试为我的网站加载外部字体，但它没有像我预期的那样工作。我希望文本为粗体，我加载了粗体版本，但它似乎不起作用。我相信 JsFiddle 可以使用外部字体，所以我复制了我的代码并将其放在 JsFiddle 上，但仍然不起作用。

这是我的 jsfiddle

http://jsfiddle.net/noppanit/sr1eL3b0/2/

这是我加载字体的方式。

@font-face {
    font-family:'Andale Mono MT Std Bold', 'Open Sans', 'arial', 'sans-serif';
    src: url(http://www.salon87.nyc/wp-content/themes/salon87/vendor/fonts/AndaleMonoMTStd-Bold.ttf);
    /* use src to point to the location of your custom font could be from your local server folder (like ./fonts/) or a remote location. */
}
section {
    font-family:'Andale Mono MT Std Bold'
}

html 有点乱，因为我只是从站点复制它。不确定我是否遗漏了任何明显的东西。

Answer 1

因为浏览器会为字体加载不同的文件，所以我尝试包含所有不同的类型。您最大的问题是 font-family 需要成为字体的标识符。您将其视为应该具有“回退”名称，这是无法做到的。

@font-face {
    font-family:'Andale Mono MT Std Bold';
    font-weight:700;
    src: url(FILE_LOCATION.eot) format('embedded-opentype');
    src: url(FILE_LOCATION.eot?#iefix) format('embedded-opentype'),
     url(FILE_LOCATION.woff) format('woff'),
     url(FILE_LOCATION.ttf) format('truetype'),
     url(FILE_LOCATION.svg#levenim) format('svg');
}
section {
    font-family:'Andale Mono MT Std Bold'
}