使用webfont美化博客标题

August 20th, 2014 Leave a comment Go to comments

博客的标题字体总是宋体,看起来很没品位?改成图片式LOGO后,修图和位置摆放很烦?这些都可以用网络字体搞定。这段时间折腾博客主题,顺手把博客的标题字体换了,看起来更大气。

国内有家提供webfont服务的网站,名叫”有字库“,可以提供数种方式,将webfont嵌入到你的网站中。正版字库数量也非常丰富,有1000多种,足够满足你的需要。实在没有的话,它还允许你自己上传字体文件,由他们作为个人使用的webfont,代为托管(也就是默认盗版咯)。另外鉴于Google在国内的连通性,如果有人敢用Google提供的webfont,我只能表示敬佩。

因为这次我只是想把博客标题和副标题字体改一下,需要改的文字是固定的,所以选用了css引用法加载字库。注意这里引用的是经过处理的字库,里面仅包括你所需要的那些字符。为什么不直接把整个字体文件包进来?那太大了,打开个页面还得下载几M的字体文件,那得加载到猴年马月。而只有几个字的字库文件,大小也就几KB,完全不是问题。

在有字库网站上选中合适的字体(可以自己构建个html文件,用Javascript引用的方式快速预览效果),然后选择第一项“CSS引用”方式,输入你需要的字符,它就会自动生成你的专用字库。然后就按照页面上提示的那样,引用相应的css文件,并且给相应元素指定font-family或者class就行了。它那个css文件链接不是普通的文件链接,而是比较智能,能够识别出你当前浏览器类型,针对性地返回相应的css style。

一般来说,到这就可以了。但是我的博客是HTTPS的,页面里加载非本站的内容HTTP内容(有字库的css文件和字库文件),会被判定为不安全,导致出现各种恼人提示。所以还得接着折腾。下面的步骤无视了有字库的TOS,如有不适请Ctrl+W。

解决办法(真実は)只有(いつも)一个(一つ):把字库文件下载到自己的主机里,用自己的域名来引用。
具体步骤:
一、下载字库文件
前提是你已经能够通过有字库的网站,用生成的字库正常显示。这时候用Firefox/Chrome右键打开网页源代码,点击html head部分里的css文件引用链接,类似于:

然后就能看到类似下面的内容:

上面那个警告不管它,看到那个url了吗?那个就是字库文件了,把它拷贝到浏览器地址栏,下载下来!需要下载三种扩展名的字库文件,分别是.eot、.ttf、.woff。链接里改下扩展名即可。
下下来以后,放到博客的任意目录下。如果博客标题和副标题的字体不一样,还需要在有字库的网站上分别生成并分别下载字库文件。

二、修改css文件
每个主题的css文件都不一样,不过一般在你的主css文件(比如style.css)的最前头加入下列定义:

关于@font-face的定义,网上有好几种方式,这里选择其中一种演示。这其中font-family可以随便起名。
接着,就是修改你所需的元素的字体了,这里用博客标题做演示:

各个style的具体含义这里不说了,注意一下font-family的值对应font-face里写的那个。
至此,webfont已在博客里安家,https网站不会提示有不安全内容了。刷新下博客主页,看看劳动成果吧!

本文为悠然居(https://wordpress.youran.me/)的原创文章,转载请注明出处!

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 使用webfont美化博客标题
  1. Yu | #1
    August 20th, 2014 at 01:20 |

    其实也可以挂到其它地方的,只要是https即可。
    github提供 ,又拍云也提供

    Google Chrome 36.0.1985.143 Google Chrome 36.0.1985.143 Mac OS X  10.9.4 Mac OS X 10.9.4
    • youran | #2
      August 20th, 2014 at 11:29 |

      嗯,感觉还是放在自己窝里放心,主要文件不大才2、3KB。

      Firefox 30.0 Firefox 30.0 Windows XP Windows XP
  1. No trackbacks yet.