css 字体属性详细总结-阿里云开发者社区

开发者社区> 技术小胖子> 正文

css 字体属性详细总结

简介:
+关注继续查看

1,font-size属性设置字体的大小


声明:

有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。

请始终使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落。

使用像素来设置字体大小 (px)

通过像素设置文本大小,可以对文本大小进行完全控制:

h1 {font-size:60px;}


使用百分比设置字体大小 (%)

父元素的百分比

1
2
3
4
5
6
7
8
9
10
11
12
body{
font-size: 40px;
}
h1,h2{
font-size: 100%; 表示和父元素body元素定义的字体一样大
}
h1{
font-size:50%;   表示相对于父元素来说,h1属性字体是父元素的1/2;(20px)
}
h2{
font-size: 200%; 表示相对于父元素来说,h2属性字体是父元素的2倍;(80px)
}

smaller比父元素更小

1
2
3
4
5
6
body{
font-size: 40px;
}
h1,h2{
font-size: smaller; 表示比父元素body元素定义的字体更小,
}

larger:比父元素更大:

1
2
3
4
5
6
body{
font-size: 40px;
}
h1,h2{
font-size: larger; 表示比父元素body元素定义的字体更大,
}

inherit:继承父元素的

1
2
3
4
5
6
body{
font-size: 40px;
}
h1,h2{
font-size: larger; 表示继承父元素body元素定义的字体大小,
}

 
2,font-family定义字体类型

可以使用逗号(,)隔开,以确保字体不存在的时候直接使用下一个字体


p {

font-family: '微软雅黑',‘宋体’Times, TimesNR, 'New Century Schoolbook',

Georgia, 'New York', serif;

}


 

3,font-weight字体加粗

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。

如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

normal(默认值),bold(粗), bolder(更粗) ,lighter(更细)

1
2
3
4
5
6
7
8
9
10
  
p.normal {
font-weight:normal;
}
p.thick {
font-weight:bold;
}
p.thicker {
font-weight:900
}


4,font-style字体风格

normal :正常标准

italic :斜体

oblique :倾斜

inherit :继承

1
2
3
4
5
6
7
8
9
p.normal {
font-style:normal;
}
p.italic {
font-style:italic;
}
p.oblique {
font-style:oblique;
}

italic 和 oblique 的区别

font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。

通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。


5,font-variant 小型大写字母显示文本

font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

1
2
3
4
p.small
  {
  font-variant:small-caps;
  }





      本文转自crazy_charles 51CTO博客,原文链接:http://blog.51cto.com/douya/1840855,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
[转帖]ASP.NET 2.0中CSS失效的问题总结
ASP.NET 2.0中CSS失效的问题总结 经常有人遇到ASP.NET 2.0(ASP.NET 1.x中可能是有效的)中CSS失效的问题,现将主要原因和解决方法罗列如下: 1,CSS文件路径不正确 这个问题属于Web开发中的基础问题,一般采用相对路径会出现这样的问题,或者样式文件写在了母版页里面,在内容页与母版页不在同一级目录下时会出现这样的问题。
636 0
总结CSS3新特性(媒体查询篇)
CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; media query 与 media type 的区别在于: media query是一个值或一个范围...
767 0
Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
在Android中,TextView是我们最常用的用来显示文本的控件。   一般情况下,TextView中的文本都是一个样式。那么如何对于TextView中各个部分的文本来设置字体,大小,颜色,样式,以及超级链接等属性呢?下面我们通过SpannableString的具体实例操作来演示一下。    res-layout-main.xml [html] view pla
1003 0
css中如何设置字体
来自百度的回答: 建议使用font-family: "Microsoft YaHei";支持UTF-8和GB2312字符集。不生效的3种情况:1.当此属性定义的是全局样式时,对于表单类的标签就不会生效,还需要再次定义如:body {font-family: "Microsoft YaHei";}对表单input就不生效,还需要定义一个input {font-family: "Microsoft YaHei";}才可以。
610 0
前端学习 -- Css -- 字体
设置字体颜色,使用color来设置文字的颜色 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度,并不是字体的大小一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不能。
695 0
21119
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载