CSS 文本样式(上)(20160817-0017)
2016-08-28 16:25
375 查看
通过文本样式的设置,更改字体的大小、样式及文本等。
一、字体总汇
样式表:
二、字体设置
1、font-size
3、font-style
4、font-weight
5、font-family
三、Web 字体
虽说可以通过备用字体来解决用户端字体缺失问题,但终究用户体验不好,且不一定备用字体所有用户都安装了。所以,现在 CSS提供了 Web 字体,也就是服务器端字体。
示例代码地址
一、字体总汇
样式表:
属性名 | 说明 | 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: 40px; }解释:设置文本的大小。属性值如下:
值 | 说明 |
---|---|
xx-small | 设置字体大小。 |
x-small | 设置字体大小。 |
small | 设置字体大小。 |
medium | 设置字体大小。 |
large | 设置字体大小。 |
x-large | 设置字体大小。 |
xx-large | 设置字体大小。 |
smaller | 设置字体相对于父元素字体的大小。 |
larger | 设置字体相对于父元素字体的大小。 |
数字+px | 使用 css 像素长度设置字体大小。 |
数字+% | 使用相对于父元素字体的百分比大小。 |
/* 先设置父元素字体大小 */ body{ font-size: 40px; } /* 在设置相对小一些 */ p{ font-size: smaller; }2、font-variant
p{ font-variant: small-caps; }解释:设置字体是否以小型大写字母显示。
值 | 说明 |
---|---|
normal | 表示如果以小型大写状态,让它恢复小写状态。 |
small-caps | 让小写字母以小型大写字母显示。 |
p{ font-style: italic; }解释:设置字体是否倾斜。
值 | 说明 |
---|---|
normal | 表示让倾斜状态恢复到正常状态。 |
italic | 表示使用倾斜。 |
oblique | 表示让文字倾斜。区别在字体本身没有斜体时使用。 |
p{ font-weight: bold; }解释:设置字体是否加粗。
值 | 说明 |
---|---|
normal | 表示让加粗的字体恢复正常 |
bold | 粗体 |
bolder | 更粗的字体 |
lighter | 轻细的字体 |
100~900 之间的数字 | 600 及之后是加粗,之前不加粗 |
p{ font-family: sans-serif; }解释:使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体,可以做几个后备字体。
p{ font-family:"Times New Roman",Georgia,Serif; }6、font
p{ font: 50px Serif; }解释:字体设置简写组合。格式如下[是否倾斜 | 是否加粗 | 是否转小写大写] 字体大小 字体名称。
三、Web 字体
虽说可以通过备用字体来解决用户端字体缺失问题,但终究用户体验不好,且不一定备用字体所有用户都安装了。所以,现在 CSS提供了 Web 字体,也就是服务器端字体。
@font-face{ font-family: abc; src:url("字体地址"); } p{ font-family: abc; }英文字体文件比较小,而中文则很大。所以,中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体,就不太建议 。
示例代码地址
相关文章推荐
- CSS设置文本样式
- CSS 文本样式[下]
- css设置文本样式
- 利用css的样式对文本进行隐藏和显示
- css 样式设计(一)( 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 )
- CSS: CSS常用的文本样式属性
- 05使用CSS设置字体和文本样式
- css所有文本修饰样式
- css文本样式1
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- css文字与文本相关样式
- 【HTML5学习笔记】20:CSS文本样式 下
- CSS边框、背景、文本样式
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- css文本样式整理
- 前端学习笔记7 CSS为文本添加样式
- 5.html&css实验5. 颜色、字体、文本格式化和盒模型的样式定义
- CSS 文本样式[上]
- 第21节 css设置文本样式
- Css基本样式————文本