WonderCSS

Google Font 允许你的 CSS 使用在线字体!

作为 WEB设计者 们在网页设计中我们运用的元素,除了颜色、图片、互动要素,就用户直接体验的角度讲字体(font-family)首当其冲。尤其很多网站在第一屏设计时为体现网站的功能都会直接以大字体表达。一个好的 WEB 设计对字体的应用、文字的规划都是十分考究的,在此你是否对你所用的字体感到选择面少而捉襟见肘,那么今天介绍的 Web Font 会直接帮你解决这方面问题!

什么是 Google Web Font

Google Web Font,是指在你设计的网页中,不再单纯只能使用浏览者本机字体进行渲染,而是使用在线字体进行效果渲染。最大的好处是,任何用户所看到的文字效果都一样,不用担心用户电脑没有安装特定字体而出现效果不一致的现象。通过调用 google 提供的JS脚本,来渲染网页文字。

About-Google-Web-Fonts

有必要了解的是 Google Web Font 所提供的字体,都是开源的、免费的,不用担心版权问题!

使用Google Web Font

1 选择需要的字体

进入Google Web Font官方网站:http://www.google.com/fonts,选择需要的字体。

在选择字体的主界面中,左边是筛选条件,包含通过类别(Categories)、字体厚度(Thickness)、字体倾斜度(Slant)、字体宽度(Width)和使用的脚本(Script)进行筛选。

右边主区域是字体预览区域。在预览区域,可以按不同的文本形式(包括一个单词、一句话、一个段落)来预览字体效果,默认是以一句话(Sentence)的形式预览。同时,你还可以通过调整文字大小、指定特定的文字来观察文本在不同大小的效果。当然,为了方便用户选择,它还支持排序功能。

2 添加到字体Collection

在一个网页中,可能需要使用多种字体来显示不同的文字(如标题是一种字体、正文是另外一种字体)。这种情况下,需要把你希望使用的字体添加到Collection中。

Web-Fonts-Add-To-Collection

当你决定使用某种字体后,在预览区域,点击【Add to Collection】按钮,把你选择的字体添加到Collection中,为下一步使用字体做好准备。这类似于做菜,你首先需要在超市中选购原料和调料,选择好某种原料和调料之后,添加到你的购物篮中,然后去收银台结账。这之后,你才能开始做菜。这里的Collection就相当于你做菜的原料单。嗯,就这么简单!

3 使用所选字体

添加到Collection中后,主区域下方会显示当前你所选择的字体。

Web-Fonts-Collection-font-famil

点击【Use】按钮,进入Use Place界面。

在这个界面,首选,会展示你之前所选择的那些字体,并且,会把每种字体所支持的样式(Style)罗列出来供你选择。Google建议广大苦逼的设计师,尽量只选择需要的字体,因为所用的字体越多,网页会越慢(因为有一个下载字体的过程)。

Impact-on-page-load-time

第二步,选择你需要的字符集(character sets)。如下图所示:

这里罗列的字符集,是所选字体所支持的字符集。如果是英文字体,一般就是Latin或Latin Extended字符集。

第三步,把脚本添加到网页中,用于载入字体库。这里有三种方式添加代码:标准CSS方法、@import方法和引用Javascript方法。

Web-Fonts-Embed-Your-HTML-Document

最后,在你的 CSS 文件中使用这些字体。在CSS中使用Web Font,和我们平常使用本机字体一样,写法就是下面这个样子:


.web-font {
    font-family: 'Euphoria Script';
}

Google Web Font 的不足

每位做中文设计的设计者,无论是 WEB 还是 UI 都面临这样一个问题,汉字在屏幕上该怎么处理?在WEB设计中除了宋体、黑体、微软雅黑,我们还有什么选择?

Google Web Font 固然优秀但它并没有解决我们中文的难题。一方面,国人在资源开放性方面做得不够;另一方面,中文字体较大,下载需要更多的时间,和最初的提高用户体验的目的背离,在此我们只能期待 Google Web Font 的继续完善开发,虽然中文由于单字太多但如果我们可以进行文字选择的话,这样也能节省很多字节以减轻浏览者的下载压力。

即便如此 Google Web Font 已经开启了一个好开端,向来负责任的 Google 值得我们继续期待!

By 于湛 发布于 2013.05.30 5,270 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注