怎么才能使服务器Nginx（或者Apache）支持字体文件_.htaccess 允许访问ttf字体文件-CSDN博客

本文链接：https://blog.csdn.net/yypsober/article/details/52012577

为了在前端正确显示字体，服务器需要设置http header以支持字体文件。对于Apache和Nginx，主要涉及修改mime-type headers和设置CORS。Apache中，可以修改配置文件或创建.htaccess文件；Nginx则需更新mimes.types配置并调整vhost设置。正确配置后，浏览器将能正确加载和显示字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了在前端正确地显示字体，浏览器必须使用正确的http header来接受字体文件。如果服务器没有设置要求的头信息，那么有些浏览器就会在控制台报错或者直接不能显示。

可能你的服务器已经配置好了，你无须再动任何东西。如果没有配置好，那么你需要注意下面几点：

首先，修改mime-type headers；
其次设置CORS headers-仅当你从不同域下获取字体文件或者html页面的时候。（*注意：如果你没有设置CORS headers信息，你可以直接把字体文件（路径）嵌入到CSS样式中。如果你去fontello网站下载到本地的话fontello.css中就已经这样做好了）

下面介绍两大主流服务器的字体支持配置：

Apache

设置正确的mime-type来支持字体文件，将下面的设置加入到服务器配置文件中：

AddType application/font-sfnt            otf ttf
AddType application/font-woff            woff
AddType application/font-woff2           woff2
AddType application/vnd.ms-fontobject    eot

如果你不能修改配置文件，那么就在你的项目下新建一个*.htaccess文件，添加下面的设置：

设置CORS headers 信息：

<FilesMatch ".(eot|ttf|otf|woff|woff2)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Nginx

Nginx服务器默认是没有支持字体的mime-type设置的，并且对.eot文件的mime-type也是不正确的。在配置文件夹下找到mime-type设置的地方。通常，在mimes.types文件下。
搜索.eot，并在下它的设置下添加下面几行：

application/font-sfnt            otf ttf;
application/font-woff            woff;
application/font-woff2           woff2;
application/vnd.ms-fontobject    eot;

对于CORS headers 信息设置，添加下面的几行到你的vhost配置中：

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}