WordPress企业级应用
CMS与电商商业建站技巧

Font-awesome字体CDN加速方法

最近调试一个网站,由于加载font-awesome的字体与css文件,严重影响网页加载速度。但是font awesome字体又是页面图标的必用字体,随采用CDN方法进行加速。

具体操作方法:

  1. 网站加载font awesome的方法为在页头调用font-awesome.min.css,之后前述css文件加载相关fontawesome-webfont.woff2、ttf等字体。就是下载并加载这些文件拖慢了网页速度。
  2. 找到font-awesome.min.css文件,将里面的内容改为调用CDN提供的文件。用以同步从CDN加载上述内容,而非从本地网站中下载。具体方法:
    1.  打开 font-awesome.min.css 文件并清空内容。
    2. 输入内容:
      @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
      用以直接调用外部cdn提供的font-awesome.min.css、fontawesome-webfont.woff2等文件。
    3. 保存、上传。清除cache后重新检查网页速度。由于从外部同步下载 font awesome内容,网页速度已明显提高。

这里使用的font awesome 内容系BootstrapCDN网站提供,调用说明请见: https://bootstrapcdn-dev-pr-747.herokuapp.com/fontawesome/ 。您也可以根据需要选择其他的CDN服务商。国内可以使用下面这个:https://www.bootcdn.cn/font-awesome/

补充:如果你需要同样处理JS文件,则在JS文件中使用下列代码:
document.write('<script src="abc.js" type="text/javascript" charset="utf-8"></script>');

赞(0)
未经允许不得转载:为知网 » Font-awesome字体CDN加速方法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址