>

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

- 编辑:betway88 -

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

添加google字体到你的wordpress主题 (载入中...)

【新增】使用自己下载的字体的示例: 参考     

Google Web Fonts 免费为你的博客提供安全而漂亮的字体服务。通过使用Google Web Fonts,你的博客不用上传任何字体,就能显示除了常用的“Arial”, “Verdana”等字体之外的其它字体。

@font-face{

众所周知,网站可读性取决于它的设计和外观。网页设计中扮演最重要角色的字体,使用的什么样的字体对您的网站很重要。例如,Arial /Helvetica (sans-serif), Verdana and Georgia是我们常用的web设计的字体。这些字体提供一个很好的可读性,但如果你想用新字体,你需要做的就是确保浏览者的网络设备安装了这些字体。这样很难确定。所以就得自己上传字体到服务器,并通过CSS来加以控制。但现在,有一个更好的免费工具,那就是Google Web Fonts

  font-family: "自己的字体名字,可以随便起,可以不和字体文件名相同";

在您使用Google Web Fonts服务之前,请首先了解以下两点:

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

1.选择太多的字体会减缓你的博客加载速度,所以你只需选择必须使用的。以免造成访问速度变慢的情况发生。

}

2.如果你只能选择你所需要的语言,你会帮助防止您的网页上的变得缓慢。

注意这样只是把字体定义好了,并没有应用到任何的元素上。只要在任何的html元素上指定font-family:"自己定义的字体名" 即可。

3.目前Google Web Fonts的界面及预览语言不为英语(不妨碍中文使用)。

注意:经自己测试,应用自定义字体时,font-family的值只能写自定义的字体名,不能加其他任何的多于字体或者多于字符,否则无法应用自定义字体!

Google Web Fonts能直观展示各种web字体,就像Serif,Sans-Serif,Display 和 Handwriting,你还可以浏览某些属性,如脚本显示字体、宽度、倾斜和厚度。所有这些属性可以显示在侧窗格中。在你选择你想要的字体时,你还可以直观预览诸如单词、句子、段落等整体样式。

 

下面是一个简单的教程,帮助你更快更好使用Google Web Fonts:

目录:

1.点击 Google Web Fonts 进入谷歌字体服务,选择您想要的字体,然后点击右下角“Add to collection” 按钮,在这里,我们选择“Alike”字体来作为整个教程的例子字体。

1:CSS家族五大字体

betway88 1

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

2.点击“Add to collection”后,会在页面最下方出现这样一个信息“1 font family in your collection” 还有三个按钮,分别是“Choose“,“Review” 和“Use“。 在这里,我们选择 “Use“。也就是使用。

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

betway88 2

4:@font-face用法详解

3.它还要求对字体设置。选择可用的样式,例如“粗体、斜体”等。但只针对某些特定字体。接下来,选择特定的语言字符。生成代码。

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

 这是CSSbetway88 ,中的五大字体家族。

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)的服务器,已由香港转移至美国,所以链接时间会很长,甚至断断续续出现请求超时的情况。
betway88 3  

这样就是说谷大神在中国再也神不起来了。欲哭无泪的是我们苦逼的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();

    (family就等字体名称,空格用 号代替)在样式文件里面调用,如font-family为 Wire One 则 http://fonts.useso.com/css?family=Wire One
    

     页面JS调用方法(families就等字体名称,空格用 号代替) 

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

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

 

三:(更详细的介绍)

原文链接:  

betway88 4

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

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

 

本文由摄影专区发布,转载请注明来源:CSS在线字体库,外部字体的引用方法@font-face