|
|
楼主
发表于 2015-4-20 10:07:08
|
查看: 1108 |
回复: 0
前言 简单说完css边框和背景属性，那么今天就轮到css3字体属性值了，网页最最最最最最重要的莫过于内容，但是内容的主体是文字，所以文字才是大头。乍一看这标题就有很明显的菊(蛋)花(疼)味，假如说我要再重复一遍@font-face泼出去的水又收回来重复利用的属性的话，感觉有点索然无味，大众审美会疲劳。各位看了会嗤之以鼻，不屑一顾！当然了，简单的介绍那是必不可少，比较普及率没有这么高嘛。
iconfont和font-face到底存在什么乱七八糟的事情呢，假如你看过前端观察CSS3 icon font完全指南和小胡子哥再探@font-face及webIcon制作就会大概的知道其实他们是相辅相成，相互依懒的关系，缺一不可吧。好吧，调情开始。
初始font-face
每次介绍一次新属性之前，都要把其属性值先简单介绍一下，这样可以让同行加深一下印象，对于@font-face这个属性，mozilla的语法如下- @font-face {
- [font-family: <family-name>;]?
- [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
- [unicode-range: <urange>#;]?
- [font-variant: <font-variant>;]?
- [font-feature-settings: normal|<feature-tag-value>#;]?
- [font-stretch: <font-stretch>;]?
- [font-weight: <weight>];
- [font-style: <style>];
- }
@font-face可以让csser们自定义网页显示字体，即使是用户本地电脑没有安装相关的字体，但是依然可以正常是显示。
比如定义一个HelveticaNeue字体，假如你在电脑上看的的是 那说明你的电脑上没有这个Helvetica字体，假如你显示 那么说明你的电脑上是有这个字体。
而通过@font-face引入自定义字体，那么不管你电脑有没有Helvetica字体都会显示后面这张图片的字体。
1.font-family，指定一个字体类型作为默认字体类型，比如font-family:宋体默认字体就会是宋体
.2.src，这里有3个值，分别是url引入字体路径资源，本地路径或者网络路径都可以；
font-face-name：自定义字体名称；
formart：字体格式，因为浏览器的N国争锋，所以导致市面上有很多的字体格式，目前主要有ttf、woft、eot、svg、svgz这几种格式类型，对应的浏览器支持如下[td]| 浏览器 | 支持类型 | | IE6,7,8 | 仅支持 Embedded OpenType(.eot) 格式。 | | Firefox 3.5 | 支持 TrueType、OpenType(.ttf, .otf) 格式。 | | Firefox 3.6 | 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。 | | Chrome,Safari,Opera | 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。 |
3.unicode-range，字体编码的范围，比如8位，16位等。
4.font-variant，字体变形值
5.font-stretch，字体拉伸值
6.font-weight，字体粗线值
7.font-style，字体属性值其实还有一个值叫做font-feature-settings这个值答题是跟字体变形font-variant表现出来差不多一样，故这里不做介绍。
当然以上的值都是可选的，你不想要显示自定义字体，完全没有必要往下看。假如我们想要在网页显示自定义字体，那么我们的css要如下- @font-face {
- font-family: 'emotion';
- src: url('emotion.eot'); /* IE9*/
- src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('emotion.woff') format('woff'), /* chrome、firefox */
- url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
- url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */
- }
好了，font-face简单介绍就到这里，假如你还不懂，那麻烦你自己点击上面推荐的那两篇文章。初识iconfont- font-family: 'emotion';
- src: url('emotion.eot'); /* IE9*/
- src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('emotion.woff') format('woff'), /* chrome、firefox */
- url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
- url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */
- }
就算我们一开始不懂这个英文不懂是干嘛的，对于iconfont，英文从后往前读应该叫做：字体图标。这里面已经包含两个概念，首先必须是字体，第二，就是图标。
我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性，所以这个iconfont必须是以文字嵌入到样式中，所以想到的必须是font；既然是图标那么它就必须有一个路径来引入进来，首先我们一开始想到的img这个标签，既然又是文字又是图标，我们能想到的就只有这个@font-facecss3属性。还有这个iconfont后来词语，并不是一开始就出现的，网页制作者或者学者想要叫起来更爽口所赋予的一个表现层的东西。所以，当我们看见阿里巴巴的iconfont的图标教程如下：第一步：使用font-face声明字体- @font-face {font-family: 'iconfont';
- src: url('iconfont.eot'); /* IE9*/
- src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('iconfont.woff') format('woff'), /* chrome、firefox */
- url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
- url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
- }
第二步：定义使用iconfont的样式- .iconfont{
- font-family:"iconfont" !important;
- font-size:16px;font-style:normal;
- -webkit-font-smoothing: antialiased;
- -webkit-text-stroke-width: 0.2px;
- -moz-osx-font-smoothing: grayscale;}
第三步：挑选相应图标并获取字体编码，应用于页面- <i class="iconfont">3</i>
效果如下
|
|
|小黑屋| 码途山海.智隐长卷
渝ICP备15002301号-2
渝公网安备50011202504426
回复
支持
反对