font-family
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft Yahei", tahoma, "WenQuanYi Micro Hei"
}
该属性定义文本使用哪种字体,字体相关的属性都是有继承性的,所以通常只需要为body元素设置font-family。上面的代码中写了很多字体,这是为了保证一种回退机制,如果用户的电脑根本没有第一种字体或者浏览器不支持第一种字体,那么浏览器就会使用第二种字体,以此类推直到找到一个支持的字体。多种字体之间用逗号分隔,如果某种字体它是有空格的,如Helvetica Neue
就需要用引号包裹,其他的如tahoma
就不需要引号包裹。如果字体中有英文字体,一定要放到最前面,英文字体会影响数字和标点符号。
font-size
font-size设置字体的大小。chrome的最小字体为12px,所以小于12px的字体默认会以12px字体显示。我写了一个小例子:
文字的大小默认是medium
,可选关键字xx-small,x-small,small,medium,large,x-large,xx-large
,我通常很少用他们,除了这些还可以是smaller
, 它表示设置为比父元素更小的尺寸,larger
比父元素更大的尺寸。用的较多的是CSS长度单位,还可以用百分比表示,百分比是基于父元素的文字大小。
font-style
定义文本的风格。默认值normal
表示正常显示,italic
斜体风格,oblique
倾斜的字体。我试了下italic和oblique在效果上几乎没差别,但是细微之处,italic表示斜体,然而并不是所有的文本都有斜体的,没有斜体变量的特殊字体会应用oblique,即把字体倾斜一个角度,这样看起来它也是斜体了,oblique
就是把字体倾斜一个角度。
font-variant
Hello World
Hello World
<p style="font-variant: normal">Hello World<p>
<p style="font-variant: small-caps">Hello World<p>
用于把小写字母转换为小型的大写字母显示。默认值normal
,可以是small-caps
。
font-weight
定义文本的粗细,默认值normal
。属性值bold
定义粗体。bolder
定义更粗的文本,它是相当于父元素的字体粗细,如果父元素是normal,那么bolder和bold是一样粗的。lighter
定义更细的字体,同样是相对于父元素。属性值还可以是数值100,200,300,400,500,600,700,800,900
中的一个,400等于normal,700等于bold。
font-face
这个属性略复杂,简单来说它可以让我们在网页开放中使用自定义字体,常用属性font-family, src, font-weight, font-style
font-family
定义字体的名字
src
定义字体的路径,拿我经常用的iconfont字体图标举例:
@font-face {
font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
// 保证字体图标的平滑
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
不同后缀的文件是为了兼容更多的浏览器,url属性指定字体的路径,相对路径、绝对路径或外链都可以。format属性指的是字体的格式,值可以是truetype, opentype, truetype-aat, embedded-opentype, svg
,主要用于帮助浏览器识别字体。另外还可以用local
加载本地的字体,这样就避免去服务器请求资源,当然用户本地要有这种字体才可以,使用方法如下:
@font-face {
font-family: "iconfont";
src: local('Microsoft Yahei'),local('HelveticaNeue-Light');
}
font-weight
这个属性是为了确保在使用font-weight时,能以我们定义的字体来显示加粗的字体,因为一套字体很可能有多个版本,每个版本对应一种粗细,例如:
// normal
@font-face {
font-family: 'QH';
font-weight: 400;
src: local('HYQIhei 40s')
}
// weight: 500
@font-face {
font-family: 'QH';
font-weight: 500;
src: local('HYQihei 50S');
}
.p1 {
font-family: 'QH';
font-weight: 400;
}
.p2 {
font-family: 'QH';
font-weight: 500;
}
<p class="p1">Hello World</p>
<p class="p2">Hello World</p>
font-style
font-style定义不同风格的字体,由于不是每种字体都有斜体的,所以一套字体,我们可能需要准备两种,一种是正常的(normal),一种是斜体(italic),我们就可以这样使用:
@font-face {
font-family: 'BASE';
font-style: normal;
src: local('BASE normal')
}
@font-face {
font-family: 'BASE';
font-style: italic;
src: local('BASE italic');
}
.p1 {
font-family: 'BASE';
font-style: normal;
}
.p2 {
font-family: 'BASE';
font-style: italic;
}
<p class="p1">Hello World</p>
<p class="p2">Hello World</p>
知识扩展
css通用字体系列一共五种,理论上讲用户安装的任何字体都会是其中的一种,这五种字体分别是:
Serif字体
衬线字体是比例的,并且有上下短线,例如Times, Georgia
Sans-serif字体
无衬线字体也是成比例的,它没有上下短线,例如Helvetica, Geneva, Verdana, Arial
,我平常用无衬线字体较多,下面一张图直观表现什么是衬线:
Monospace等宽字体
等宽字体非等比例字体,通常定义计算机代码、打印机文本会使用这种字体。由于是等宽的,所以字母i和m宽度相同,常见的字体有Courier, Courier New, Andale Mono
Cursive字体
模仿人的手写体。常见的有Author, Comic Sans
Fantasy 字体
这些字体无法用任何特征定义,不属于以上四种字体的都属于Fantasy字体,网上很多奇特的艺术字属于这种字体
各平台常用字体
参考文章
Win平台字体
Microsoft Yahei: Win默认的无衬线黑体类字体;
Tahoma: 一种常用的无衬线字体;
SimSun: 宋体,不适合大号文字;
Arial: 一种常用的无衬线西文字体(西文即英文字体);
Mac ios平台字体
Helvetica Neue, Helvetica: 一种常用的无衬线西文字体;
HeiTi SC: Mac默认的无衬线黑体类字体;
Hiragino Sans GB: 冬青黑体一种常用的无衬线字体;
Android
Droid Sans: 安卓系统默认无衬线西文字体;
Linux平台字体
WenQuanYi Micro Hei: 文泉驿微米黑为Liunx系统下推荐字体;