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

原创 2016年08月28日 16:25:23

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

一、字体总汇

样式表:

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




示例代码地址

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS 文本样式[上]

字体总汇 字体设置 Web字体 通过文本样式的设置,更改字体的大小、样式以及文本的方位。一、字体总汇CSS文本样式表如下: 属性名 ...
  • xiaoxiaobukuang
  • xiaoxiaobukuang
  • 2017年10月26日 09:36
  • 198

CSS文本样式[上]

index.html: CSS文本样式[上] 这是html5 style.css: @charset "utf-8"; body{ font-si...
  • a716121
  • a716121
  • 2016年08月04日 09:37
  • 308

CSS:设置文本与字体样式

应用基本的文本样式文本对齐方式:text-align该属性用于控制“行内块元素”或“块元素”内“行内元素”(文本元素)的居中方式的,包含三个值: left:居左对齐; center:居中对齐; rig...
  • Hierarch_Lee
  • Hierarch_Lee
  • 2016年09月21日 18:14
  • 1765

CSS笔记(字体样式,文本属性和颜色样式)

CSS-字体样式与颜色
  • qq_38801354
  • qq_38801354
  • 2017年07月07日 20:40
  • 803

css 样式文字溢出显示省略号

.test { color:#888888;  white-space:   nowrap; //表示文本不会换行,在同一行继续,知道遇到标签为止;  overflow:      hidde...
  • kouwoo
  • kouwoo
  • 2014年12月12日 18:04
  • 858

CSS:文本样式(缩进/对齐/字符间隔/文本装饰/空白格处理)

通过CSS样式,可以设定文本的缩进,对齐,字符间隔等属性。 代码整理自w3school:http://www.w3school.com.cn...
  • books1958
  • books1958
  • 2014年12月09日 09:58
  • 2383

过滤HTML以及CSS样式等标签

现在在页面上要取出文章内容的一部分作为描述,比如下图所示: 红线框里的数据是该篇文章的内容的一部分,但是文章内容保存的时候会有html代码等的格式 为了显示正常需要过滤html标签,代码如下:...
  • shiyuezhong
  • shiyuezhong
  • 2012年10月29日 09:27
  • 5790

CSS样式表~选择器、段落、样式篇

优先级顺序:行内样式表 > 嵌入式样式表 > 外部样式表 > 浏览器默认样式 id选择器优先级 > 类选择器优先级 > 标签选择器优先级 全局选择器 * 反向选择 :not(div){color:...
  • cysear
  • cysear
  • 2015年12月13日 17:44
  • 491

CSS字体颜色,文本装饰线,删除线

CSS字体颜色 方法1使用rgb值来制定 body{ background-color:silver/Aqua/Navy;         (css有16种基本颜色和150种扩展颜色可以利用该法指定)...
  • chq11106004389
  • chq11106004389
  • 2015年12月29日 14:38
  • 1078

css网页布局中文字排版的属性和用法

前段时间,学习了几个大的网站的图文混排的方法。今天总结下,css网页布局中文字排版的相关属性以及用法。包括:设定字体、颜色、大小、段落空白,首字下沉、首行缩进、中文字的截断、固定宽度词内折行(word...
  • judyge
  • judyge
  • 2016年07月18日 15:09
  • 421
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 文本样式(上)(20160817-0017)
举报原因:
原因补充:

(最多只允许输入30个字)