2016-04-15

最近发现Wordpress有时候加载的特别慢，于是就想办法找了下原因。之前听网上说是因为wordpress用的是Google的字体库，而且是每次都要加载，导致访问慢的，于是当时装了个Disable Google Fonts的插件，禁用了Google字体，然后装了一个Useso take over Google插件，将字体文件改为360托管的字体库，这样就可以访问快点了。当时的效果的确挺好的，结果最近在使用的时候又发现网站访问慢了，用Chrome查了下资源加载的情况，发现访问useso的字体库的时间特别的长。这时候改用Google字体的时候反而更快了。。。这就十分令人惆怅了，有时候用useso的快，有时候用google的快，真的挺麻烦的。后来想想干脆把这个文件下到服务器上不就好了么。。。于是就倒腾出了下面的办法，将当前主题的字体文件下载到了服务器上。

一

首先在源代码中找到加载字体文件的位置，在博客首页的源代码中找到了下面这行：

1	<link rel='stylesheet' id='baskerville_googleFonts-css' href='//fonts.googleapis.com/css?family=Roboto+Slab%3A400%2C700%7CRoboto%3A400%2C400italic%2C700%2C700italic%2C300%7CPacifico%3A400&ver=4.5' type='text/css' media='all' />

其实搜索fonts就可以找到了这行。根据这行，我们晓得他引用了googleapis的字体包，命名为’baskerville_googleFonts-css’，而’baskerville’事实上就是我当前的主题名。

二

然后我们需要在后台找到上面id对应的那个超链接的位置。打开wordpress的根文件夹，直接搜索’fonts.googleapis.com’这个关键字：

1	$find . -type f \|xargs grep fonts.googleapis.com

查找结果为：

./wp-admin/includes/class-wp-press-this.php: $open_sans_font_url = ',' . add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );

./wp-content/themes/baskerville/functions.php: wp_register_style('baskerville_googleFonts', '//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400italic,700,700italic,300|Pacifico:400' );

./wp-content/themes/baskerville/functions.php: $font_url = '//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400italic,700,700italic,300';

./wp-includes/js/tinymce/plugins/compat3x/css/dialog.css:@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin-ext,latin");

./wp-includes/script-loader.php: $open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";

这样我们就找到了所在文件的位置。大概看一下，实际上用处比较大的是第二行的那串在主体中的定义（对比第一步的内容）（./wp-content/themes/baskerville/functions.php的内容）（其余都是写无关紧要的插件所用的字体）。很明显可以看出来，接下来我们只要把后面那个url换成本地的字体包就可以了。

三

现在就来下字体包，打开第一步中的那个链接，可以看到是下面的内容：

/* latin */

@font-face {

font-family: 'Pacifico';

font-style: normal;

font-weight: 400;

src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://fonts.gstatic.com/s/pacifico/v7/Q_Z9mv4hySLTMoMjnk_rCfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

}

/* cyrillic-ext */

@font-face {

......

发现是一段css，使用了很多的外部资源，下面我们就用一个爬虫来把他直接下下来并打包好：

#coding:utf-8

import urllib2,cookielib,sys,re,os,urllib

import numpy as np

#网站登陆

cj=cookielib.CookieJar()

opener=urllib2.build_opener(urllib2.HTTPCookieProcessor(cj))

opener.addheaders=[('User-agent','Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36))')]

urllib2.install_opener(opener)

path='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400italic,700,700italic,300|Pacifico:400'

request=urllib2.Request(path)

response=urllib2.urlopen(request)

html=response.read()

urls=re.findall(r'url\ ((.*?)\ )',html.replace('\n',' '))#由于这里排版会和latex冲突，所以在\和(，以及\和)之间加了空格，使用的时候要删掉

path='font_cache/'

if not os.path.exists(path):

os.mkdir(path)

for url in urls:

urllib.urlretrieve(url,path+url.split('/')[-1])#下载文件

for url in urls:

html=html.replace(url,url.split('/')[-1])#更新改css文件

font=open(path+'font-css','w+')

font.write(html)#保存

这样就生成了一个font_cache文件夹，在这里有所有下好的字体文件以及更新新后的css文件

四

最后把这个文件上传到wordpress的根目录下（放到其他目录有时候会没有权限访问，有点麻烦），然后将function.php中的那个url改成/font_cache/font-css（相对于wordpress的根）即可。（记得备份初始文件防止改错。。。。）

转载于:https://www.cnblogs.com/floodwater/p/8575025.html

关于WordPress中字体加载慢的问题解决方案(转)相关推荐

将WordPress后台的open-sans字体加载源从Google Fonts换为360 CDN
2019独角兽企业重金招聘Python工程师标准>>> 针对最近因为Google fonts被墙导致WordPress 打开慢的问题,Jeff 在上一篇<Google Font ...
uni-app中如何加载字体
uni-app中如何加载字体下载我们需要的字体将字体转成css 转换地址:https://transfonter.org/ 将转化过的css文件放到static目录下 @font-face {fo ...
ArcGIS问题解决——CAD中的字体加载到ArcMap显示乱码
ArcGIS问题解决--CAD中的字体加载到ArcMap显示乱码 CAD中的字体加载到ArcMap显示乱码,是因为字符集的问题,解决办法即修改注册表中默认字符集为简体中文字符集即可. ①win+R,输 ...
Web 性能优化：使用 CSS font-display 控制字体加载和替换
作者 | 张旭乾责编 | 欧阳姝黎出品 | 峰华前端工程师在编写网站的时候,或多或少都会用到一些网络上的字体,CSS 3 中虽然加入了对 Web Fonts(网络字体)的支持,但是浏 ...
浅析Android字体加载原理
浅析Android字体加载原理前言之前在处理系统字体问题的时候,可借鉴的资料很少,遇到了很多坑,不得不了解Android字体加载原理,现抽空写一篇总结,来加深自己对这块的理解. 内容概述 And ...
Android系统字体加载流程
一.背景视觉同学提了一个需求,要求手机中显示的字体可以支持medium字体,经过分析,android原生的字体库中并没有中文的medium字体,如果使用bold,显示又太粗,为满足需求,需要分析an ...
html字体加载规则,CSS-等待字体加载，然后渲染网页
CSS-等待字体加载,然后渲染网页我正在使用@ font-face将字体嵌入到我的网站中. 首先,文本将作为系统默认值呈现,然后(假定字体文件已加载)正确的字体将在几分之一秒后呈现. 有没有一种方法 ...
Android Webview使用自定义字体加载网页
前言有时,当我们使用Webview加载一个网页的时候,需要使用特定的字体来显示,这时就需要我们对页面做下处理! 方法 ①首先需要我们获得目标网页的HTML源码: URL url = new URL( ...
前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...

关于WordPress中字体加载慢的问题解决方案(转)

2016-04-15

一

二

三

四

关于WordPress中字体加载慢的问题解决方案(转)相关推荐

最新文章

热门文章