css 14-CSS3属性详解：Web字体
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声明字体
@font-face {font-family: 'webfont';
src: url('webfont.eot'); /* IE9*/
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
（2）第二步：定义使用webfont的样式
.web-font{
font-family:"webfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
（3）第三步：为文字加上对应的样式
<i class="web-font">这一分钟，你和我在一起，因为你，我会记得那一分钟。从现在开始，我们就是一分钟的朋友。这是事实，你改变不了，因为已经完成了。</i>
举例：
我们按照上图中的步骤来，引入这个字体。完整版代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p{
font-size:30px;
}
/* 如果要在网页中使用web字体（用户电脑上没有这种字体）*/
/* 第一步：声明字体*/
/* 告诉浏览器 去哪找这个字体*/
@font-face {font-family: 'my-web-font';
src: url('font/webfont.eot'); /* IE9*/
src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/webfont.woff') format('woff'), /* chrome、firefox */
url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
/* 第二步：定义一个类名，谁加这类名，就会使用 webfont 字体*/
.webfont{
font-family: 'my-web-font';
}
</style>
</head>
<body>
<!-- 第三步：引用 webfont 字体 -->
<p class="webfont">生命壹号，永不止步</p>
</body>
</html>
代码解释：
（1）my-web-font这个名字是随便起的，只要保证第一步和第二步中的名字一样就行。
（2）因为我把字体文件单独放在了font文件夹中，所以在src中引用字体资源时，写的路径是 font/...
工程文件：
#字体图标（阿里的 iconfont 网站举例）
我们其实可以把图片制作成字体。常见的做法是：把网页中一些小的图标，借助工具生成一个字体包，然后就可以像使用文字一样使用图标了。这样做的优点是：
将所有图标打包成字体库，减少请求；
具有矢量性，可保证清晰度；
使用灵活，便于维护。
也就是说，我们可以把这些图标当作字体来看待，凡是字体拥有的属性（字体大小、颜色等），均适用于图标。
使用步骤如下：（和上一段的使用步骤是一样的）
打开网站http://iconfont.cn/，找到想要的图标，加入购物车。然后下载下来：
压缩包下载之后，解压，打开里面的demo.html，里面告诉了我们怎样引用这些图标。
举例1：（图标字体引用）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*申明字体*/
@font-face {font-family: 'iconfont';
src: url('font/iconfont.eot'); /* IE9*/
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff') format('woff'), /* chrome、firefox */
url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
font-family: iconfont;
}
p{
width: 200px;
border: 1px solid #000;
line-height: 60px;
font-size:30px;
margin:100px auto;
text-align: center;
}
p span{
color:red;
}
</style>
</head>
<body>
<!-- 【重要】编码代表图标 -->
<p><span class="iconfont"></span>扫码付款</p>
</body>
</html>
效果如下：
举例2：（伪元素的方式使用图标字体）
如果想要在文字的前面加图标字体，我们更习惯采用伪元素的方式进行添加。
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*申明字体*/
@font-face {font-family: 'iconfont';
src: url('font/iconfont.eot'); /* IE9*/
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff') format('woff'), /* chrome、firefox */
url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
p{
width: 200px;
border: 1px solid #000;
line-height: 60px;
font-size:30px;
margin:100px auto;
text-align: center;
position: relative;
}
.icon::before{
/**/
content:"\e628";
/*position: absolute;*/
/*left:10px;*/
/*top:0px;*/
font-family: iconfont;
color:red;
}
span{
position: relative;
}
</style>
</head>
<body>
<p class="icon">扫码付款</p>
<span class="icon" >我是span</span>
<div class="icon">divvvvvvvvvvv</div>
</body>
</html>
效果如下：
工程文件：
- 2018-02-20-图标字体demo.zip
#其他相相关网站介绍
- Font Awesome 使用介绍：http://fontawesome.dashgame.com/
定制自已的字体图标库：
SVG素材：
#360浏览器网站案例
暂略。
这里涉及到：jQuery fullPage 全屏滚动插件。
中文网址:http://www.dowebok.com
相关说明:http://www.dowebok.com/77.html
#使用 Bootstrap 网站的图标字体
打开如下网站：http://www.bootcss.com/p/font-awesome/。
如上图所示，下载字体后，进行解压：
使用步骤如下：
（1）如图只是想要字体的话，可以把css和font这两个文件夹拷贝到项目里。
（2）在html文档中的
css 14-CSS3属性详解：Web字体的更多相关文章
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- Css盒模型属性详解（margin和padding）
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- CSS3 Media Queries_media queries, css3属性详解
Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...
- CSS3属性详解（图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一 ...
- css中border-sizing属性详解和应用
box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...
- css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
- [转]CSS vertical-align属性详解 作者：黄映焜
CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...
- 【CSS3 transform属性和过渡属性详解】
CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...
随机推荐
- 关于Camtasia2020安装完成之后无法运行问题的解决方法
在录像编辑软件Cmtasia更新到了2020版本之后,有部分小伙伴们遇到了这样的问题:在我们安装好软件之后,居然无法运行.今天小编就给大家介绍一下该如何解决这个问题. 方法一: 第一步,选中桌面上Ca ...
- ubuntu安装php的 redis扩展
wget https://github.com/phpredis/phpredis/archive/2.2.4.tar.gztar -zxvf 2.2.4.tar.gz cd phpredis-2.2 ...
- 永别了，Dota2！
永别了,Dota2 .输了游戏,我还有人生! 游戏中,总有那些喷子,自己玩的不好,经常说人家! 和大便打架,即使赢了,身上也非常臭! 所以对于这种人,敬而远之即可!不吵不闹,默默把锅扛起!赢了,就好说 ...
- SpringBoot2整合Redis
pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 蓝桥杯——字母阵列(2018JavaC组第3题)
字母阵列(18JavaC3) 标题:字母阵列 仔细寻找,会发现:在下面的8x8的方阵中,隐藏着字母序列:"LANQIAO". SLANQIAO ZOEXCCGB MOAYWKHI ...
- Free-Form Image Inpainting with Gated Convolution
Free-Form Image Inpainting with Gated Convolution pytorch 引言 和Generative Image Inpainting with Conte ...
- 前端静态站点在阿里云自建 K8S DevOps 集群上优雅的进行 CI/CD
目录 网站 域名 K8S DevOps 集群 私有 Gitlab 使用 Docker 编译站点 * Dockerfile * 构建编译 Image * 测试编译 Image * 推送镜像到 Aliyu ...
- JZOJ8月5日提高组反思
JZOJ8月5日提高组反思 再次炸了 虽然不是爆0 但也没差多少-- T1 想的DP 然后就打了 一开始是只能拿60的 后来想到了用前缀和优化 然后打完交了 最后一分钟测了一下空间 爆了 就赶紧把数组 ...
- 关于缓存的一些重要概念(Redis 前置菜)
1. 缓存的基本思想 很多朋友,只知道缓存可以提高系统性能以及减少请求相应时间,但是,不太清楚缓存的本质思想是什么. 缓存的基本思想其实很简单,就是我们非常熟悉的空间换时间.不要把缓存想的太高大上,虽 ...
- Core在IIS的热发布问题或者报错文件已在另一个程序中打开
关于Core发布到IIS的热发布问题,或者覆盖dll文件的时候会报错"文件已在另一个程序中打开",也就是无法覆盖程序的问题,经过百度和分析总结以下几种方案: 一.使用app_off ...