nginx字体跨域配置和前端中文字体问题

nginx字体跨域配置

nginx.conf添加

location ~* \.(eot|ttf|woff|svg|otf)$ {
   add_header 'Access-Control-Allow-Origin' 'http://xxxx.com';
   add_header 'Access-Control-Allow-Methods' 'OPTION, POST, GET';
   add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Content-Type';
}

参考:

https://github.com/ckinmind/PHPHub/issues/2

https://carey.akhack.com/2017/06/08/Nginx%E8%B7%A8%E5%9F%9F%E4%BD%BF%E7%94%A8%E5%AD%97%E4%BD%93%E6%96%87%E4%BB%B6%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E6%B3%95/

chrome解析中文字体文件异常(OTS parsing error: OS/2: Failed to parse table)

--->原因其实只是因为中文字体比较大

--->使用font-spider可以解决静态特定范围字符的字体注册和字体文件的减小

npm i -g font-spider
font-spider ./xxx.html

--->ttf转woff2/woff/eot

可以使用在线转换,https://transfonter.org

也可以使用工具离线转换,查找github可以看到nodejs环境的和java环境的两种wrapper,底层都基于c的实现,

例如https://github.com/Jijun/font-converter-gui这个是一个java的wrapper,

但是其woff2转换依赖于jwoff2.dll,woff2enc.dll,woff2enc.dll等等,需要注意的是jvm的位数需要与dll一致,

如果感觉比较麻烦ttf转woff2可以直接使用

https://github.com/trinhnghia/ttf2woff2这个仓里的已经编译好的32位binary文件,

woff2_compress xxx.ttf

可以将ttf转换为同名woff2文件

woff2_uncompress xxx.woff2

可以将woff2转换为ttf同名文件

反思

font-spider命令可以扫描静态文件中使用到的字体的相关文字,移除掉字体文件中未使用的数据实现压缩,但是如果是动态的页面的情况下呢