关闭

CSS 文本样式(上)(20160817-0017)

标签: 文本样式字体设置fontfont-face
126人阅读 评论(0) 收藏 举报
分类:

通过文本样式的设置,更改字体的大小、样式及文本等。

一、字体总汇

样式表:

属性名 说明 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 让小写字母以小型大写字母显示。
3、font-style

p{
	font-style: italic;
}
解释:设置字体是否倾斜。

说明
normal 表示让倾斜状态恢复到正常状态。
italic 表示使用倾斜。
oblique 表示让文字倾斜。区别在字体本身没有斜体时使用。
4、font-weight

p{
	font-weight: bold;
}
解释:设置字体是否加粗。

说明
normal 表示让加粗的字体恢复正常
bold 粗体
bolder 更粗的字体
lighter 轻细的字体
100~900 之间的数字 600 及之后是加粗,之前不加粗
5、font-family

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;
}
英文字体文件比较小,而中文则很大。所以,中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体,就不太建议 。




示例代码地址

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7810次
    • 积分:488
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类
    文章存档
    最新评论