Web中文炫酷字体的使用

疑问+理论

其实我一直在纳闷,为什么Google Fonts在网上托管那么多英文字体,为什么不搞几个在线托管中文字体呢?

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic);

就像这样,一句话搞定,多爽。

原来,英文字体只用搞定26个字母+标点符号
而由于中文字体的特殊性,一个字体最少也要好几个MB,这样在浏览网页的时候,用户还要去下载你的字体,这样就影响流畅度。所以,一般都会选择操作系统预装字体进行开发。(想了解如何更好的使用操作系统字体请看 阮一峰这篇博文 ,这里不做阐述。)

但是,有时候,网页的一级标题,二级标题,我们还是想用更漂亮的中文艺术字体怎么办?

思路:把你想要变成独特字体的那一小部分字,从艺术字体里提取出来,给你的网页用,这样的话,抽取出来之后的字体文件就小了很多,可能只有十几kb而已。

这里就要使用一个CSS3的模块,@font-face,下面给出常见用法

@font-face {
    font-family: "造字工房形黑粗体";
    src: url("造字工房形黑粗体.eot"); /* IE9 */
    src: url("造字工房形黑粗体.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("造字工房形黑粗体.woff") format("woff"), /* chrome、firefox */
    url("造字工房形黑粗体.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("造字工房形黑粗体.svg#造字工房形黑粗体") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

注意,这里只是给你看一下,不用着急复制粘贴,瞄一眼就好。

步骤简述

  1. 提取字体 + 字体格式转换
  2. 把转换过的eot、woff、ttf、svg字体全部拷贝到项目中去
  3. 在css中插入相应的@font-face语句
  4. 在需要使用的地方调用font-family: "xxxxx";

详细操作

  1. 下载百度 是百度EFE出品的 Fontmin软件,并安装。
  2. 下载你想要的字体(字体格式:ttf)(由于好看的中文字体都很贵,所以我最终求助了万能的淘宝)
  3. 打开刚安装好的Fontmin,并在软件左侧窗口输入你希望加载特定字体的文字
  4. 把你下载好的字体,拖入软件左下方框框中,并点击生成按钮
    可以看到字体已实时改变 但请注意,有些情况下,莫名其妙会没有效果,那只好请亲再换一个字体吧…不过大部分字体是ok的
  5. 得到两个css文件,与4种字体
  6. 打开项目文件夹,在app/assets/里新建一个fonts文件夹,并把上一步得到的4个字体,拖入fonts文件夹中
  7. 打开xxxx-embed.css文件,注意是带有embed的css文件(另一个放在scss中无效),复制所有代码,粘贴到application.scss(或是你未来会调用该代码的scss文件中)
  8. 并在scss你想改变的元素中,直接用字体名调用,与调用其他字体一样
    比如像这样我在我项目中的这个teal-text中调用了font-family: "造字工房朗倩粗体";
  9. 刷新页面,得到结果

我的作品

面向妹子程序员的招聘网站
实现的功能:
首页:
图片轮播+文字轮播,嵌入视频,滑动导航栏
职缺展示页:
精美多条件搜索框(带折叠窗)


华丽卡片Flash Card视频卡展示公司环境