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，.woff的链接文件。如果示例仅使用.css文件扩展名呈现，那么这些文件的用途是什么？

Answer 1

虽然某些浏览器支持TTF / OTF格式作为webfonts，但Internet Explorer会生成错误，除非该字体设置为Installable Embedding模式。当.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

Answer 2

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

感谢

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

2 个答案: