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之文本样式

CSS文本样式 /*缩进文本 text-indent具有继承性*/ .p{ text-indent:5em; } div{ width:500px; ...

CSS---Tips1文本样式

字体样式font-variant设置字体是否以小型大写字母显示。p{ font-variant: small-caps; /* 让小写字母以小型大写字母显示。*/ }font字体设置简写组合方...

CSS文本样式总结

本文纯属个人学习的总结。也懒得去码字了,所以就从买的正在学的书里截下图来,作者勿怪,要是觉得侵权请私信我,我会及时删除。 在CSS中,关于文本样式属性如下: 使用“text-decoration:...

05使用CSS设置字体和文本样式

使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace...

CSS3——文本样式

文字阴影与自动换行 text-shadow 文字阴影 多个阴影 word-break word-wrap 字体 服务器字体font-family可以自定义 默认字体 根据字体样式选择对应字体 本地字体...

[06]CSS 文本样式(下)

一.文本汇总HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小、样式以及文本的方位。 重点了解一下 CSS 文本样式中文本内容的一些设置方法,样式表如下: 属性名 说明 ...

CSS_文本样式

text-align 水平对齐left/center/right左中右 justify 两端对齐 inherit 继承line-height 文本行间距行高不够时,行与行之间后重叠 数字px 数...

CSS文本样式用法

.html代码如下:

css文本样式

关键词:字体样式(Font Style),字体(Font Style)属性 序号 中文说明 标记语法 1 字体样式 {font:font-style font-...

HTML5学习_day01(7)--css常用文本样式

css常用文本样式 0.dark*  属性值 可以设置文本段落背景颜色 用法: 《水浒传》,是中国四大名著之一。 效果: 《水浒传》,是中国四大名著之一。 1.文字颜色  属性名:col...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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