font-awesome 中的字体文件有什么用？

Question

我正在使用 font-awesome，它与 CSS 文件的 CDN 扩展配合使用效果很好。下面是一个简单的例子：

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
    </head>
    <body>
        <i class="fa fa-adjust"></i>
    </body>
</html>

该示例运行良好，但从 the CDN，我还获得了 .otf、.eot、.svg、.ttf、[=16 的链接=] 文件。如果示例仅使用 .css 文件扩展名就可以很好地呈现，那么这些文件有什么用？

Answer 1

这是因为如果您看到 css 文件，您将找到导入或调用所有这些文件的链接或代码。基本上 css 只是显示和调用特定图标的代码。但该图标在那些 otf 和其他文件中。就像您只能在 html 中调用 img 标签一样，但为什么您需要将网站中的图像保存在网站中。希望它清除

谢谢

Answer 2

虽然某些浏览器支持 TTF/OTF 格式作为网络字体，但 Internet Explorer 会生成错误，除非将字体设置为可安装嵌入模式。当 .woff 和 .eot 变体都没有提供给 IE 时，会重现此行为。

这可以通过使用以下实用程序之一将字体文件中的 fsType 标志设置为 0000 来解决，代表可安装嵌入模式：使用 ttembed-js npm 模块

npm install -g ttembed-js
ttembed-js path/to/fontawesome-webfont.ttf
ttembed-js path/to/FontAwesome.otf

或者，在 node.js 内：

var callback = function(error, oldFsType) {
    if (error) {
        console.error('Something went wrong.', error);
        return;
    }
    if (oldFsType === '0000') {
        console.log('fsType is already 0000; no action taken.');
    } else {
        console.log('fsType successfully changed from ' + oldFsType + ' to 0000.');
    }
}
var ttembed = require('ttembed-js');
ttembed({filename: './path/to/fontawesome-webfont.ttf'}, callback);
ttembed({filename: './path/to/FontAwesome.otf'}, callback);

使用原来的 ttembed

git clone https://github.com/hisdeedsaredust/ttembed.git
cd ttembed
make
./ttembed path/to/fontawesome-webfont.ttf path/to/FontAwesome.otf

font-awesome 中的字体文件有什么用？

What is the use for font files from font-awesome?

javascript

html

css

fonts

font-awesome