14-CSS3属性详解:Web字体

#前言

开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体。从此,把特殊字体处理成图片的方式便成为了过去。

支持程度比较好,甚至 IE 低版本的浏览器也能支持。

#字体的常见格式

不同浏览器所支持的字体格式是不一样的,我们有必要了解一下字体格式的知识。

#TureTpe格式:(.ttf)

.ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式。

支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。

#OpenType格式:(.otf)

.otf 字体被认为是一种原始的字体格式,其内置在TureType的基础上。

支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。

#Web Open Font Format格式:(.woff)

woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离。

支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+。

#Embedded Open Type格式:(.eot)

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+。

#SVG格式:(.svg)

.svg字体是基于SVG字体渲染的一种格式。

支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。

总结:

了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体。通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式之间的区别。

下载字体的网站推荐:

#WebFont 的使用步骤

打开网站http://iconfont.cn/webfont#!/webfont/index,如下:

上图中,比如我想要「思源黑体-粗」这个字体,那我就点击红框中的「本地下载」。

下载完成后是一个压缩包,压缩包链接:http://download.csdn.net/download/smyhvae/10253561

解压后如下:

上图中, 我们把箭头处的html文件打开,里面告诉了我们 webfont 的使用步骤:

(1)第一步:使用font-face声明字体

  1. @font-face {font-family: 'webfont';
  2. src: url('webfont.eot'); /* IE9*/
  3. src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  4. url('webfont.woff') format('woff'), /* chrome、firefox */
  5. url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  6. url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
  7. }
 

(2)第二步:定义使用webfont的样式

  1. .web-font{
  2. font-family:"webfont" !important;
  3. font-size:16px;font-style:normal;
  4. -webkit-font-smoothing: antialiased;
  5. -webkit-text-stroke-width: 0.2px;
  6. -moz-osx-font-smoothing: grayscale;}
 

(3)第三步:为文字加上对应的样式

  1. <i class="web-font">这一分钟,你和我在一起,因为你,我会记得那一分钟。从现在开始,我们就是一分钟的朋友。这是事实,你改变不了,因为已经完成了。</i>
1

举例:

我们按照上图中的步骤来,引入这个字体。完整版代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. p{
  8. font-size:30px;
  9. }
  10. /* 如果要在网页中使用web字体(用户电脑上没有这种字体)*/
  11. /* 第一步:声明字体*/
  12. /* 告诉浏览器 去哪找这个字体*/
  13. @font-face {font-family: 'my-web-font';
  14. src: url('font/webfont.eot'); /* IE9*/
  15. src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  16. url('font/webfont.woff') format('woff'), /* chrome、firefox */
  17. url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  18. url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
  19. }
  20. /* 第二步:定义一个类名,谁加这类名,就会使用 webfont 字体*/
  21. .webfont{
  22. font-family: 'my-web-font';
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <!-- 第三步:引用 webfont 字体 -->
  28. <p class="webfont">生命壹号,永不止步</p>
  29. </body>
  30. </html>
 

代码解释:

(1)my-web-font这个名字是随便起的,只要保证第一步和第二步中的名字一样就行。

(2)因为我把字体文件单独放在了font文件夹中,所以在src中引用字体资源时,写的路径是 font/...

工程文件:

#字体图标(阿里的 iconfont 网站举例)

我们其实可以把图片制作成字体。常见的做法是:把网页中一些小的图标,借助工具生成一个字体包,然后就可以像使用文字一样使用图标了。这样做的优点是:

  • 将所有图标打包成字体库,减少请求;

  • 具有矢量性,可保证清晰度;

  • 使用灵活,便于维护。

也就是说,我们可以把这些图标当作字体来看待,凡是字体拥有的属性(字体大小、颜色等),均适用于图标。

使用步骤如下:(和上一段的使用步骤是一样的)

打开网站http://iconfont.cn/,找到想要的图标,加入购物车。然后下载下来:

压缩包下载之后,解压,打开里面的demo.html,里面告诉了我们怎样引用这些图标。

举例1:(图标字体引用)

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. /*申明字体*/
  8. @font-face {font-family: 'iconfont';
  9. src: url('font/iconfont.eot'); /* IE9*/
  10. src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  11. url('font/iconfont.woff') format('woff'), /* chrome、firefox */
  12. url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  13. url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  14. }
  15. .iconfont{
  16. font-family: iconfont;
  17. }
  18. p{
  19. width: 200px;
  20. border: 1px solid #000;
  21. line-height: 60px;
  22. font-size:30px;
  23. margin:100px auto;
  24. text-align: center;
  25. }
  26. p span{
  27. color:red;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <!-- 【重要】编码代表图标 -->
  33. <p><span class="iconfont"></span>扫码付款</p>
  34. </body>
  35. </html>
 

效果如下:

举例2:(伪元素的方式使用图标字体)

如果想要在文字的前面加图标字体,我们更习惯采用伪元素的方式进行添加。

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. /*申明字体*/
  8. @font-face {font-family: 'iconfont';
  9. src: url('font/iconfont.eot'); /* IE9*/
  10. src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  11. url('font/iconfont.woff') format('woff'), /* chrome、firefox */
  12. url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  13. url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  14. }
  15. p{
  16. width: 200px;
  17. border: 1px solid #000;
  18. line-height: 60px;
  19. font-size:30px;
  20. margin:100px auto;
  21. text-align: center;
  22. position: relative;
  23. }
  24. .icon::before{
  25. /**/
  26. content:"\e628";
  27. /*position: absolute;*/
  28. /*left:10px;*/
  29. /*top:0px;*/
  30. font-family: iconfont;
  31. color:red;
  32. }
  33. span{
  34. position: relative;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <p class="icon">扫码付款</p>
  40. <span class="icon" >我是span</span>
  41. <div class="icon">divvvvvvvvvvv</div>
  42. </body>
  43. </html>
 

效果如下:

工程文件:

  • 2018-02-20-图标字体demo.zip

#其他相相关网站介绍

定制自已的字体图标库:

SVG素材:

#360浏览器网站案例

暂略。

这里涉及到:jQuery fullPage 全屏滚动插件。

  • 中文网址:http://www.dowebok.com

  • 相关说明:http://www.dowebok.com/77.html

#使用 Bootstrap 网站的图标字体

打开如下网站:http://www.bootcss.com/p/font-awesome/

如上图所示,下载字体后,进行解压:

使用步骤如下:

(1)如图只是想要字体的话,可以把cssfont这两个文件夹拷贝到项目里。

(2)在html文档中的

css 14-CSS3属性详解:Web字体的更多相关文章

  1. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  2. Css盒模型属性详解(margin和padding)

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  3. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  4. CSS3 Media Queries_media queries, css3属性详解

    Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...

  5. CSS3属性详解(图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一 ...

  6. css中border-sizing属性详解和应用

    box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...

  7. css动画-animation各个属性详解(转)

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  8. [转]CSS vertical-align属性详解 作者:黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  9. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

随机推荐

  1. 记php多张图片 合并生成竖列 纵向长图(可用于商品详情图合并下载)

    <?php namespace app\mapi\common\image; /** * 拼接多幅图片成为一张图片 * * 参数说明:原图片为文件路径数组,目的图片如果留空,则不保存结果 * * ...

  2. 闭关苦修半年,最终靠着这份面试题,我成功拿到了阿里的offer!

    前言 我大概我是从去年12月份开始看书学习,到今年的6月份,一直学到看大家的面经基本上百分之90以上都会,我就在5月份开始投简历,边面试边补充基础知识等.也是有些辛苦.终于是在前不久拿到了阿里的off ...

  3. word查找与替换

    ------------恢复内容开始------------ 如何快速删除大量空格键:查找和替换-更多-特殊格式-查找内容[特殊格式(段落标记)]设置为(^p^p,即点击两次段落标记),替换设置为(^ ...

  4. leetcode 108 和leetcode 109

    //感想:有时候啊,对于一道题目,如果知道那个点在哪,就会非常简单,比如说这两题,将有序的数组转换为二叉搜索树, 有几个点: 1.二叉搜索树:对于某个节点,它的左节点小于它,它的右节点大于它,这是二叉 ...

  5. 【mq学习整理】mq速览

  6. 03Python网络编程之单线程服务端

    # 对于单线程的服务端,我们借助于zen_utils(我们自己编写好的一些函数)是很容易就实现的.# 导入这个模块import zen_utilsif __name__ == '__main__': ...

  7. Spring Boot 2.x 多数据源配置之 JPA 篇

    场景假设:现有电商业务,商品和库存分别放在不同的库 配置数据库连接 app: datasource: first: driver-class-name: com.mysql.cj.jdbc.Drive ...

  8. 关闭Win10窗口拖动到桌面边缘自动缩放功能

  9. android studio很好用的插件

  10. 阻止brew自动更新

    export HOMEBREW_NO_AUTO_UPDATE=true