如何使用 Google Fonts API 学习笔记

compass_zhou 2018-9-3 601


CSS在线字体库,外部字体的引用方法@font-face

【新增】使用自己下载的字体的示例: 参考    http://www.w3cplus.com/content/css3-font-face 
@font-face{
  font-family: "自己的字体名字,可以随便起,可以不和字体文件名相同";
  src: url('下载的字体路径');
}
注意这样只是把字体定义好了,并没有应用到任何的元素上。只要在任何的html元素上指定font-family:"自己定义的字体名" 即可。
注意:经自己测试,应用自定义字体时,font-family的值只能写自定义的字体名,不能加其他任何的多于字体或者多于字符,否则无法应用自定义字体!
 
目录:

一: {font-family:serif,sans-serif,fantasy,cursive}表示什么意思

 这是CSS中的五大字体家族。


serif
serif 中文翻译为“衬线字体族”。
serif 具有末端加粗、扩张或尖细末端,或以实际的衬线结尾的一类字体。
可以看出 serif 总是在文字末端做文章,这样做的目的是增强可读性,也就是说在字号比较小的时候,serif 一族的字体仍然是比较好辨认的。
serif 典型的字体有:Times New Roman、MS Georgia、宋体……
serif 还可衍生出两种字体族:petit-serif(小衬线字体族(末端变化不明显))、slab-serif(雕版衬线字体族(末端变化非常明显))。由于显示器显示的字都不大,所以一般将小衬线字体族看作无衬线字体族,比如其中的黑体。

sans-serif
sans-serif 中文翻译为“无衬线字体族”。sans- 前缀是法语,发音为 /san/,意为“无”。
sans-serif 字体比较圆滑,线条粗线均匀,适合做艺术字、标题等,与“衬线字体”相比,如果字号比较小,看起来就会有些吃力。
sans-serif 典型的字体有:MS Trebuchet、MS Arial、MS Verdana、幼圆、隶书、楷体……

cursive
cursive 中文翻译为“手写字体族”。
顾名思义,这类字体的字就像手写的一样。
cursive 典型的字体有:Caflisch Script、Adobe Poetica、迷你简黄草、华文行草……

fantasy
fantasy 中文翻译为“梦幻字体族”。
fantasy 主要用在图片中,字体看起来很艺术,实际网页上用得不多。
fantasy 典型的字体有:WingDings、WingDings 2、WingDings 3、Symbol……

monospace
monospace 中文翻译为“等宽字体族”。
我们知道英文中各字母是不等宽的,但用 monospace,各个字母就是等宽的了,就可以像中文一样排版了。
monospace 典型的字体有:Courier、MS Courier New、Prestige……

总结
总的来说字体分为两个大类:serif、sans-serif,这两个大类下又可以分:cursive、fantasy、monospace

 

 

 

 

二: 360和谷歌外部字体

最近,谷歌全面退出中国,谷歌官网域名google.com、谷歌香港google.com.hk都打不开, ping了一下google.com和google.com.hk两个域名的服务器情况,最后ping出来的IP地址均显示为“美国”,也就是说谷歌香港(google.com.hk)的服务器,已由香港转移至美国,所以链接时间会很长,甚至断断续续出现请求超时的情况。

 

这样就是说谷大神在中国再也神不起来了。欲哭无泪的是我们苦逼的IT啊,谷歌字库不能用了,经网上一番找寻终于在wangzhan.360.cn上给解决了,虽然对360没有什么好感,但其提供的这一套服务还是相当不错的!

字体库的引用方法:(注:360字体库最近挂掉了,其实早在15年初google就在北京设置了服务器,ping fonts.googleapis.com 也可以发现,ip为203.208.40.136,地址是北京电信海淀区,比360镜像要快很多,所以直接用fonts.googleapis.com即可,不必用fonts.useso.com

  1. <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    (family就等字体名称,空格用+号代替)在页面调用
     
  2. @import url(http://fonts.googleapis.com/css?family=Ubuntu);
    (family就等字体名称,空格用+号代替)在样式文件里面调用,如font-family为 Wire One 则 http://fonts.useso.com/css?family=Wire+One
     页面JS调用方法(families就等字体名称,空格用+号代替) 

web字体库的样式调用方法:

样式里面用法:font-family: 'Poiret One', sans-serif;(字体名称)

 

三:(更详细的介绍)

原文链接:  http://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/#icomments

使用 Google Fonts 为网页添加美观字体

在线字体提供丰富多样的字体样式,能使页面更美观,更具吸引力。Google Fonts 就是一个开源的在线字体库,使用起来简单快速。

前言

文字是网页中很重要的组成部分。为文字选择一个合适的字体,能够更好的展现一个网站的个性,表达所要传递的信息,同时吸引用户来产生兴趣。

说到字体,我们首先会想到 CSS 里面的 font,例如:

<html>
<head>
    <style>
        p { font-family: Arial, Helvetica, sans-serif; }
    </style>
</head>
<body>
    <p>some text</p>
</body>
</html>

在这段 HTML 代码中为<p>标签定义了字体,当浏览器解析<p>some text</p>标签时,首先会在系统中查找 Arial 这个字体,如果找不到,就找 Helvetica 字体,如果还是找不到,就会查找浏览器默认的 sans-serif(非衬线)字体,最后把文字渲染出来。

 

什么是安全字体

安全字体这个概念,也许很多人都不是很熟悉,我们先举个例子:

font-family: Arial, Helvetica, sans-serif;

这个对字体(font-family)的定义就是一个安全字体。每种操作系统都有自己默认安装的字体,浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同,有的甚至名称都不一样,在这种情况下,我们必须定义安全字体,使字体在所有的浏览器中都能够正常显示。

在上面这个 font-family 的定义中,我们选择 Arial 作为首选字体(注:Arial 字体是最常用的 sans serif 字体,也是 Windows 的默认字体,当字体很小是不容易阅读),但是,苹果系统中没有这个字体,所以我们选择 Helvetica(和 Arial 很相似)作为第二备选字体,最后我们选择 sans-serif 作为第三备选字体,如果在一个既没有 Arial 也没有 Helvetica 的系统里,那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样,我们很大程度上保证了使用不同操作系统的访问者都能看到相同(至少是类似)的页面文字。

除了 Arial,常见的安全字体还有:

  • Verdana 字体,它是微软公司的核心字体之一,专门为屏幕显示而开发的。它的应用广泛,宽度大而易于阅读,是显示器中最清晰的字体。CSS 写法:font-family: Verdana, Geneva, sans-serif;
  • Times New Roman 字体,它是最常用的 serif 字体,是浏览器默认的字体。小号字的易读性也很差。CSS 写法:font-family: 'Times New Roman', Times, serif;

有兴趣的读者可以通过这个链接来查阅常用的安全字体。http://www.w3schools.com/cssref/css_websafe_fonts.asp

在网页开发中,应该尽量使用安全字体,也就是高度通用的字体,这样,访问者才能流畅的阅读网页的所有内容。

但是,网页设计师一定不会满足于使用这些安全字体,如何才能使用漂亮的字体,并能在普通用户的浏览器中被正确的渲染出来?答案是:使用@font-face 方案。

 

@font-face 标签简介

@font-face 被列为了 CSS3 的一项新特性,其实它并不是什么新鲜技术,它最早出现在 CSS2 的规范定义中,但是在 CSS2.1 中又被删除,现在被正式列入 CSS3。目前主流的浏览器(IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+)都能够支持这个属性,所以不用担心会有浏览器兼容性问题。

@font-face 允许您在网页中使用电脑中没有安装的字体,完全摆脱安全字体的限制。只需将字体包安装在服务器上,当用户加载网页时,字体包会自动下载到用户机器上,保证字体能够正确渲染。

随着@font-face 的不断流行,产生了许多新的字体格式图标集,称为网络字体。Google Fonts API 就是基于@font-face 的特性开发的一套优秀的网络字体库。

网络字体的优点有很多:

  1. 使用的是真正的文本,而不是图片,放大和缩小都不会影响渲染效果,用户体验好;
  2. 可以被搜索引擎辨认;
  3. 不像图片每次需要重新生成,添加删除更方便。
 

如何使用 Google Fonts API

Google Fonts 提供了超过 600 种的高质量的字体,所有的浏览器都兼容,无需引入 JavaScript,简单易用,更重要的是,免费。(虽然,暂时不支持中文字体,因为中文字体库实在是太大了)。

现在来看下,如何在网页中使用 Google Fonts。

挑选字体

登录Google Fonts (谷歌字体官方网站)。(图 1)

图 1.Google Fonts 主页
Google Fonts 主页

在主页中,您可以直接浏览所有的字体,可以按单个词语来查看,或者按句子段落来查看整体效果,还可以调整字体大小。如果您对字体分类比较熟悉,就可以使用左边的搜索条件对字体作筛选。找到您喜欢的字体之后,点击"Add to Collection"按钮,然后在网页下方的"Collection"中即可找到您添加的所有字体。

使用选中的字体来测试您的文字

在上一页面(图 1)的"Collection"中,点击"review"。在预览页面中(图 2),输入您的测试文字,来查看效果。另外在"review"页面上,您还可以调整其它的与字体相关的样式,比如字体大小,间隔,变换,等等。在图 2 中,我们选择测试的是"Condiment"字体

图 2.Google Fonts 预览页面
Google Fonts 预览页面

在您的网页中添加字体链接。

如果确认使用该字体, 在网页下方的"Collection"中,点击"Use"按钮,在接下来的页面中,您将看到详细的说明,包括字体链接和如何将字体添加到您的网页中。

有三种方式来添加字体链接:

  • Standard 方式:
    <link rel='stylesheet' type='text/css'
    href='http://fonts.googleapis.com/css?family=Condiment'>
  • @import 方式:
    @import url(http://fonts.googleapis.com/css?family=Condiment);
  • JavaScript 方式:

    (通过添加动态脚本并执行来导入字体,代码省略)

下一步定义在那个标签上使用该字体,例如:在<class="myheader">标签上使用,

.myheader {font-family: 'Condiment', cursive;}

大功告成,您现在可以打开您的网页欣赏一下了(图 3)。

图 3.测试页面效果
测试页面效果
清单 1.测试页面代码
<html>
          <head>
                     <link rel="stylesheet" type="text/css"           
                               href='http://fonts.googleapis.com/css?family=Condiment'>
                    <style>
                             .myheader {
                                        font-family: Condiment, cursive;
                                        font-size: 48px;
                                        text-align: center;
                               }
                    </style>
          </head>
          <body>
                     <div class="myheader"> Test my own text !</div>
          </body>
</html>

优化字体包加载

如果您不是大范围的在网页中使用 Google 字体,只是在标题或 logo 里使用,那么可以在 url 里添加 text 参数,来限制加载的字体包的大小,最高能缩减 90%左右的大小,以此来节约下载流量。例如:http://fonts.googleapis.com/css?family= Condiment'&text=Hello

这样,您只会下载 h,e,l,o 这四个字母的字体,大大缩小了字体包的大小。

下载字体包

您还可以把字体包下载并安装到本地,这样您就可以在本地使用这些字体,比如在 Notepad,Microsoft Office 里。

方法为:在图 3 中,点击下载按钮, 选择"Download the font families in your Collection as a zip file"

高级应用 API

Google Fonts 还开放了一些接口(称为 Developer API),用于获取字体库的信息数据。

比如实时获取字体库实际可用的字体及其相关信息:

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

这个请求的返回结果是一个 JSON 类型的数据,包括了每种字体的名称,样式种类(比如 regular,italic),版本,修改时间,包含的样式包的请求地址,等等。

请注意,在 URL 里面有一个 key,这个 key 是和您的 web 应用工程相联系的,只有注册过的 web 应用才能成功调用 Developer API。我们必须要在 Google Cloud Console 注册之后,才能获取这个 key。

关于这个 Developer API, 可以参阅这个链接

 

结束语

Google Fonts 很强大,但是也碰到一些加载的问题,最好还是字体声明的时候,在最后添加一个安全字体,来保证万无一失。另外的一个建议是,在网页中要适量的使用花样的字体,让整个页面保持干净简洁。

 

四: 关于@font-face具体用法

1 http://www.w3cplus.com/content/css3-font-face  

2 http://www.jb51.net/web/89797.html


最新回復 (0)
返回