假设要使用open sans400和700的字体,将IE浏览器调到IE8模式,打开这俩地址,友情提示不翻墙可能打不开。

http://fonts.googleapis.com/css?family=Open+Sans:400

http://fonts.googleapis.com/css?family=Open+Sans:700

会得到这么一段样式(400的)

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

里面有俩链接,一个是eot字体,一个是woff字体,在浏览器里分别下载这俩字体,在主题里新建个fonts目录,放进去,名字改的好认点,比如opensans.eot,opensans.woff。

然后上面那个样式改成下面这样,直接扔进主题样式表里。

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/opensans.eot);
  src: local('Open Sans'), local('OpenSans'), url(fonts/opensans.eot) format('embedded-opentype'), url(fonts/opensans.woff) format('woff');
}

这样字体文件就是从自己服务器加载了,当然是用其它CDN服务也可以。WordPress后台默认开启open sans字体,对于网费固定包含vpn费用的我来说没啥问题,如果那个让你受不了,装插件或者直接拷贝插件代码到主题funcitons.php里。

https://wordpress.org/plugins/remove-open-sans-font-from-wp-core/

谷歌字体现在不能用,什么也不说了。

26条留言

  1. 确实是个好办法,才发现这个,谢谢了

  2. 谢谢分享。这么说,是不是需要两步:

    步骤1:禁用google字体,比如用remove-open-sans-font-from-wp-core/

    步骤2:将主题所用到的字体,全部下下来,放在`themes/fonts/`,然后为每个字体创建一个`@font-face {}`

    是这样做吗?

    1. 我发现我主题用的字体不全是google字体,如下:

      themes/radiate$ find . -name *.css | xargs grep -R 'font-family'
      	font-family: 'Merriweather', Georgia, serif;
      	font-family:  'Roboto', sans-serif;
      	font-family: "Courier 10 Pitch", Courier, monospace;
      	font-family: 'Roboto';
      	font-family: 'Roboto';
      	font-family: 'Roboto';
      	font-family: 'Roboto';
      

      这样的话,我是不是只要下载:Merriweather、Roboto、Roboto?

      为了更好显示中文,再下个微软雅黑,也放到主题`fonts/`下,这样是不是就好了?

      1. 牛逼了,评论框现在也支持代码高亮了,想必是一个不懈追求完美的妹子:-)

        哦,对了,经过一段时间的摸索,再加上你的指点。我现在算是彻底解决了代码高亮的问题,同时也解决了博文编辑器的烦恼。我现在写博文的工具是:

        wordpress默认编辑器 + markdown (使用jp-markdown插件) + Google Code Prettify (代码高亮) + MathJax (数学公式)。

        PS:SyntaxHighlighter要求插入的代码块,所有左尖括号`<`必须全部转换为HTML实体,即`&lt;`,很难绕过去。所以转向Google Code Prettify(附带一个优点:启发式检测语言)。

        再次感谢Sola的帮助。

        1. 是你自己厉害 : )

          我的评论其实不支持代码高亮,你观察下就会发现规律。如果文章里有高亮代码,评论的代码也能高亮。为啥?因为评论和文章的代码都用了pre标签,文章有代码时就会加载脚本来渲染样式,顺道把评论框里的也渲染了(●ˇ∀ˇ●)

      2. Courier 10 Pitch这个好像不是,那你要看看是主题自带了字体文件,还是从第三方加载的。微软雅黑不用下载,windows大部分自带,而这中文字体太大了,根本没法用。

        建议的做法是给font-family里的字体设置合理的顺序,兼顾windows osx等系统,推荐看下这篇文章https://ruby-china.org/topics/14005

        1. 谢谢分享。已按该文章将所有字体设成:

          font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
          

          不过好丑!!哈哈。我又看了下我的主题,在functions.php引入了google字体:

          wp_enqueue_style( 'radiate-google-fonts', '//fonts.googleapis.com/css?family=Roboto|Merriweather:400,300' );
          

          我现在用你的方法,将google字体用自己服务器加载。

          恩对,“Courier 10 Pitch”的确不是google字体。

          如何查看主题自带了哪些字体文件(我没有找到font相关的文件名称)?

          1. 我打开`http://fonts.googleapis.com/css?family=Roboto|Merriweather:400,300`,里面有七八个@font-face,难道要全部加进去?

          2. font-family里没有谷歌字体,那加载谷歌字体就没用了,只会让中国访问你的网站速度变慢,另一个解决方法是用国内提供的谷歌字体cdn。

            下载谷歌字体就是把样式拷贝到主题样式表里,把字体文件放到相应目录下,其它不用改,反正是copy paste,fontface有多少都无所谓了。但没用的就不要加载,毕竟字体文件都不小。主题自带什么字体不重要,重要的是正在使用的有哪些,可以看看样式表里font-family都声明了哪些字体。

            如果你觉得字体不好看就换换,windows用微软雅黑或宋体,mac下倒是有很多漂亮的中文字体,可以用一下,或者直接用默认的也挺好。

        2. 我找到了你分享下载google font的脚本。我看我主题用了很多字体,怪麻烦了,先不弄了。

          谢谢sola,春节快乐!

  3. 全是天潮二狗惹的祸~~~ 可恶透顶!!!全家死光光。

  4. 前來支持一下~似乎直接用360的UseSo還簡單一些~

  5. 还可以这样啊,我还以为用360那个解决方案就是最好了呢,没想到可以从自己服务器加载,学习了。

  6. SOLA你好,请问在哪里可以下载”Microsoft YaHei”,微软雅黑,”字体,然后放到自己空间去使用,谢谢

    1. 微软雅黑是windows自带字体,没必要下载安装啊,如果你要下载,windows里copy一份出来就行了,转网络字体还是算了,太大

      1. 不是我想让WOWRDPRESS上用到”Microsoft YaHei”,微软雅黑,”字体,不想用它原来的字体

  7. 这段时间用WP的都感觉很无语了,你快点移民吧,哈哈!

    1. wordpress中文主题应该还好吧,前台不用谷歌字体就是了。谷歌搜索打不开真不习惯,移民估计是没指望了,是希望那些vpn能好好的活着。

  8. 这几天 google 得不稳定,身上能碎得地方都碎了。

评论功能已关闭