自己利用空闲时间规划制作了一个古诗词网站,主要以儿童古诗为主用于晨晨的古诗学习,既然是古诗就需要有国风的感觉,系统默认字体妥妥不能使用,就考虑了中文字体,例如方正楷体。

在网站推进过程中发现一个问题,一个字体文件5M+,而目前用的ECS也就1M的小水管,字体文件严重影响网页打开的体验,就尝试进行解决。


1、使用B服务器上网站的域名进行调用,B服务器带宽8M,结果一直遇到浏览器报错「Font from origin 'url' has been blocked from loading by rul Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'rul' is therefore not allowed access.」what the fuck,遇到了浏览器字体文件前端跨域的问题,尝试通过nginx解决,无果,放弃。

2、字体文件大更多是因为汉字足够齐全,只是包含的绝大多数字符都是不会被用到,若有办法将用到的字从字体文件中单独拿出来组成一个子集字体文件,则能减轻不必要的网络加载资源浪费。这里就要提到一个工具:Fontmin。

Fontmin

利用Fontmin可以轻松提取ttf字体文件中需要用到的字,然后转换为woff文件输出。

原本字体大小为5.31M,而常见的诗词使用的汉字并不多,将内容通过mysql对表内容导出后,使用软件压缩后,字体文件压缩到了642K,效果显著。

下载地址

https://github.com/ecomfe/fontmin-app/releases/download/v0.2.0/Fontmin-v0.2.0-win64.zip

由于官方的地址为github,下载速度较慢。