HTML5基础学习笔记(十五)
2016-07-22 14:51
162 查看
Day15 CSS文本样式
一、字体总汇
二、字体设置
1.font-size
p {
font-size: 50px;
}
解释:设置文本的大小。属性值如下表:
//先设置父元素字体大小
body {
font-size: 50px;
}
//再设置相对小一些
p {
font-size: smaller;
}
2.font-variant
p {
font-variant: small-caps;
}
解释:设置字体是否以小型大写字母显示。
//先让父元素设置小型大写
body {
font-variant: small-caps;
}
//让子元素设置恢复小写
p {
font-size: 50px;
font-variant: normal;
}
3.font-style
p {
font-style: italic;
}
解释:设置字体是否倾斜。
4.font-weight
p {
font-weight: bold;
}
解释:设置字体是否加粗。
在目前计算机和浏览器显示中,只有bold
加粗,其他更粗更细,目前体现不出来。
5.font-family
p {
font-family:
微软雅黑;
}
解释:使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏
览者系统的字体,可以做几个后备字体。
//备用字体
p {
font-family:
楷体,微软雅黑,宋体;
}
6.font
p {
font: 50px
楷体;
}
解释:字体设置简写组合方式。格式如下:[是否倾斜|是否加粗|是否转小型大写]字体大小
字体名称;
三.Web字体
虽说可以通过备用字体来解决用户端字体缺失问题,但终究用户体验不好,且不一定备用字体所有用户都安装了。所以,现在CSS
提供了
Web 字体,也就是服务器端字体。
//服务器提供字体
@font-face {
font-family: abc;
src: url('BrushScriptStd.otf');
} p
{
font-size: 50px;
font-family: abc;
}
英文字体文件比较小,而中文则很大。所以,中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体,就不太建议了。
一、字体总汇
属性名 | 说明 | CSS 版本 |
font-size | 设置字体的大小 | 1 |
font-variant | 设置英文字体是否转换为小型大写 | 1 |
font-style | 设置字体是否倾斜 | 1 |
font-weight | 设置字体是否加粗 | 1 |
font-family | 设置font 字体 | 1 |
font | 设置字体样式复合写法 | 1 ~ 2 |
@font-face | 设置Web 字体 | 3 |
1.font-size
p {
font-size: 50px;
}
解释:设置文本的大小。属性值如下表:
值 | 说明 |
xx-small | 设置字体大小。每个值从小到大的固定值。 |
x-small | |
small | |
medium | |
large | |
x-large | |
xx-large | |
smaller | 设置字体相对于父元素字体的大小 |
larger | |
数字+px | 使用CSS像素长度设置字体大小 |
数字+% | 使用相对于父元素字体的百分比大小 |
body {
font-size: 50px;
}
//再设置相对小一些
p {
font-size: smaller;
}
2.font-variant
p {
font-variant: small-caps;
}
解释:设置字体是否以小型大写字母显示。
值 | 说明 |
normal | 表示如果以小型大写状态,让它恢复小写状态。 |
small-caps | 让小写字母以小型大写字母显示。 |
body {
font-variant: small-caps;
}
//让子元素设置恢复小写
p {
font-size: 50px;
font-variant: normal;
}
3.font-style
p {
font-style: italic;
}
解释:设置字体是否倾斜。
值 | 说明 |
normal | 表示让倾斜状态恢复到正常状态。 |
italic | 表示使用斜体。 |
oblique | 表示让文字倾斜。区别在没有斜体时使用。 |
p {
font-weight: bold;
}
解释:设置字体是否加粗。
值 | 说明 |
normal | 表示让加粗的字体恢复正常。 |
bold | 粗体 |
bolder | 更粗的字体 |
lighter | 轻细的字体 |
100~900 | 之间的数字 |
600 | 及之后是加粗,之前不加粗 |
加粗,其他更粗更细,目前体现不出来。
5.font-family
p {
font-family:
微软雅黑;
}
解释:使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏
览者系统的字体,可以做几个后备字体。
//备用字体
p {
font-family:
楷体,微软雅黑,宋体;
}
6.font
p {
font: 50px
楷体;
}
解释:字体设置简写组合方式。格式如下:[是否倾斜|是否加粗|是否转小型大写]字体大小
字体名称;
三.Web字体
虽说可以通过备用字体来解决用户端字体缺失问题,但终究用户体验不好,且不一定备用字体所有用户都安装了。所以,现在CSS
提供了
Web 字体,也就是服务器端字体。
//服务器提供字体
@font-face {
font-family: abc;
src: url('BrushScriptStd.otf');
} p
{
font-size: 50px;
font-family: abc;
}
英文字体文件比较小,而中文则很大。所以,中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体,就不太建议了。
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- 盒子模型
- CSS选择器
- CSS样式优先权
- c++ primer 第五版 笔记前言
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?