0
点赞
收藏
分享

微信扫一扫

Css之【字体系列】综合技巧总结(持续更新中...)


一、CSS 字体系列

 body {font-family: 宋体;}

二、斜体文本

该属性有三个值:

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

三、字体变形

p {font-variant:small-caps;}

四、字体加粗

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;} /* 精确粗细程度*/

五、字体大小

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

使用 em 来设置字体大小

如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替 pixels。

W3C 推荐使用 em 尺寸单位。

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子中,以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过,如果使用 em 单位,则可以在所有浏览器中调整文本大小。

不幸的是,在 IE 中仍存在问题。在重设文本大小时,会比正常的尺寸更大或更小。

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

CSS 字体属性

属性

描述

​​font​​

简写属性。作用是把所有针对字体的属性设置在一个声明中。

​​font-family​​

设置字体系列。

​​font-size​​

设置字体的尺寸。

​​font-size-adjust​​

当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)

​​font-stretch​​

对字体进行水平拉伸。(CSS2.1 已删除该属性。)

​​font-style​​

设置字体风格。

​​font-variant​​

以小型大写字体或者正常字体显示文本。

​​font-weight​​

设置字体的粗细。

六、用自定义自体font-family

@font-face {
font-family: "myfont"; /* 自定义名称 */
src: url('css/fonts/方正隶二_GBK.ttf');
}


.div{

font-size: 35px;
font-family: "myfont";

}


举报

相关推荐

0 条评论