CSS在线字体库

【新增】使用本身下载的书体的示范: 参考  
 http://www.w3cplus.com/content/css3-font-face 

@font-face{

  font-family:
“自身的字体名字,能够任由起,可以不和字体文件名相同”;

  src: url(‘下载的字体路径’);

}

在意那样只是把字体定义好了,并没有采纳到任何的要素上。只要在别的的html成分上点名font-family:”自个儿定义的字体名”
即可。

注意:经本身测试,应用自定义字体时,font-family的值只可以写自定义的字体名,不能加其他任何的多于字体恐怕多于字符,否则不能使用自定义字体!

 

目录:

1:CSS家族五大字体

2:360和谷歌(Google)外部字体引用方法

3:谷歌(谷歌)外部字体引用方法详解

4:@font-face用法详解

一: {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 二,WingDings
三,Symbol……

monospace
monospace 中文翻译为“等宽字体族”。
我们领略英文中各字母是不相同宽的,但用
monospace,种种字母就是等宽的了,就足以像汉语一样排版了。
monospace 典型的字体有:Courier、MS Courier
New、Prestige……

总结
如上所述字体分为三个大类:serif、sans-serif,那两个大类下又足以分:cursive、fantasy、monospace

 

 

 

 

二: 360和谷歌(谷歌(Google))外部字体

近些年,谷歌(Google)百科退出中国,谷歌(谷歌(Google))官网域名google.com、谷歌(Google)香岛google.com.hk都打不开,
ping了刹那间google.com和google.com.hk几个域名的服务器景况,最终ping出来的IP地址均突显为“美利坚合众国”,约等于说谷歌香江(google.com.hk)的服务器,已由香港(Hong Kong)更换至United States,所以链接时间会非常长,甚至断断续续出现请求超时的情事。
银河至尊游戏官网 1
 

如此就是说谷大神在神州再也神不起来了。欲哭无泪的是大家苦逼的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. (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

行使 谷歌 Fonts 为网页添加雅观字体

在线字体提供丰盛多样的书体样式,能使页面更美观,更具吸引力。谷歌 Fonts
就是3个开源的在线字体库,使用起来大约神速。

 

前言

文字是网页中很重点的组成部分。为文字拔取一个适当的书体,可以更好的变现多个网站的特性,表明所要传递的音信,同时吸引用户来发生兴趣。

说到字体,我们第一会想到 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
的不止流行,发生了诸多新的字体格式图标集,称为互联网字体。谷歌 Fonts API
就是基于@font-face 的特色开发的一套精美的互联网字体库。

互连网字体的长处有好多:

  1. 运用的是的确的文件,而不是图形,放大和缩短都不会潜移默化渲染效果,用户体验好;
  2. 可以被寻找引擎辨认;
  3. 不像图片每趟须要再行生成,添加删减更便宜。

 

回页首

怎样运用 谷歌(Google) Fonts API

谷歌 Fonts 提供了当先 600
种的高质量的字体,所有的浏览器都非凡,无需引入
JavaScript,不难易用,更首要的是,免费。(即使,暂时不协理汉语字体,因为普通话字体库实在是太大了)。

今日来看下,如何在网页中拔取 谷歌 Fonts。

选料字体

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

图 1.Google Fonts 主页

银河至尊游戏官网 2

在主页中,您可以一直浏览所有的书体,可以按单个词语来查阅,只怕按句子段落来查看全部效果,还足以调动字体大小。假使你对字体分类相比较纯熟,就足以接纳左侧的寻找条件对字体作筛选。找到你喜欢的书体之后,点击”Add
to
Collection”按钮,然后在网页下方的”Collection”中即可找到你添加的具备字体。

应用选中的字体来测试你的文字

在上一页面(图 1)的”Collection”中,点击”review”。在预览页面中(图
2),输入您的测试文字,来查阅效果。其余在”review”页面上,您还足以调整其余的与字体相关的体裁,比如字体大小,间隔,变换,等等。在图
2 中,我们接纳测试的是”Condiment”字体

图 2.谷歌 Fonts 预览页面

银河至尊游戏官网 3

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

万一确认使用该字体,
在网页下方的”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.测试页面效果

银河至尊游戏官网 4

清单 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>

银河至尊游戏官网,优化字体包加载

假设你不是大范围的在网页中拔取 谷歌 字体,只是在标题或 logo
里拔取,那么能够在 url 里添加 text
参数,来界定加载的字体包的尺寸,最高能缩减
90%左右的深浅,以此来节省下载流量。例如:http://fonts.googleapis.com/css?family=
Condiment’&text=Hello

如此,您只会下载 h,e,l,o 那多个假名的字体,大大压缩了字体包的分寸。

下载字体包

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

方法为:在图 3
中,点击下载按钮银河至尊游戏官网 5
选择”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

那么些请求的回来结果是3个 JSON
类型的数码,包涵了每一个字体的名号,样式连串(比如
regular,italic),版本,修改时间,包罗的样式包的伸手地址,等等。

请留心,在 UCRUISERL 里面有二个 key,这些 key 是和您的 web
应用工程相挂钩的,唯有注册过的 web 应用才能打响调用 Developer
API。大家亟须求在 谷歌 Cloud Console 注册之后,才能取得那几个 key。

关于那一个 Developer API,
可以参见那么些链接

 

回页首

结束语

谷歌(Google) Fonts
很强劲,然而也赶上一些加载的难题,最好如故字体申明的时候,在结尾添加三个平安字体,来保障万无一失。此外的2个指出是,在网页中要适用的采纳花样的字体,让全部页面保持到底简洁。

 

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

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

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

相关文章