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

举报
Amrf 发表于 2019/09/05 10:37:01 2019/09/05
【摘要】 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_h...

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


【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200