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

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,如需转载请自行联系原作者

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

相关文章
新的 CSS 属性:aspect-ratio 为元素设置宽高比
新的 CSS 属性:aspect-ratio 为元素设置宽高比
22 0
前端祖传三件套CSS的常见属性和设置
CSS是前端开发中最核心的技术之一,它可以通过样式定义来控制页面元素的外观和布局。在这篇文章中,我们将介绍CSS的常见属性和设置,在你编写CSS时能够更加熟练地使用这些属性。
4460 0
你知道这个 CSS 属性吗 —— getComputedStyle
Computed 在 Vue 中常用,是一种计算属性,里面的值是响应式的,但你知道 getComputedStyle 这个 CSS 属性吗?Computed + Style ,没错,样式也能做到响应式。
24 0
HTML表单和CSS属性以及DOM实现网页版计算器
本文讲解:HTML表单和CSS属性以及DOM实现网页版计算器
30 0
CSS Flex 布局的 flex-direction 属性讲解
CSS Flex 布局的 flex-direction 属性讲解
22 0
css:css属性pointer-events实现点击穿透
css:css属性pointer-events实现点击穿透
29 0
CSS 重要概念之常见属性和设置
CSS 是一种用于描述网页样式的语言,包含众多属性和设置。本文将介绍 CSS 中一些常见的属性和设置。
29 0
CSS字体相关属性
百分比:基于父元素的font-size计算,比如50%表示等于父元素font-size的一半
30 0
CSS文本相关属性
letter-spacing、word-spacing分别用于设置字母、单词之间的间距
41 0
CSS背景属性
同一个标签可以同时设置背景图片及背景颜色,如果同时设置,那背景图片会把背景颜色覆盖
41 0
+关注
技术小胖子
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多