html css中文字属性详解

关于字体版权问题

在讲解字体样式前，要先了解一下字体版权。

很多字体是有版权的，如果擅自作为商用或以盈利为目的使用，很有可能会收到"惊喜"哦！

我们要尊重知识产权，哪里字体有版权，能否举例说明？列表如下：

• 方正
• 汉仪
• 华康
• 造字工房
• 微软雅黑
• 苹方
• ...

重点来了，哪些字体可以免费商用？开源字体列表：

• 思源宋体 GitHub
• 思源黑体 GitHub
• 阿里巴巴普惠体1.0
• 阿里巴巴普惠体2.0
• OPPO Sans
• ...

字体集

字体集	解释
serif	尾巴带装饰线的一系列字体，例如宋体
sans-serif	没有尾巴的一系列字体，例如黑体

文字大小单位

默认字体大小为浏览器字体大小，一般是16px

字体大小有继承性，继承的是计算后的值

• 绝对单位
  • 不能随系统和浏览器分辨率或父元素大小的改变而改变，每个浏览器显示效果不一，不推荐使用
  • 厘米cm、毫米mm
• 相对单位
  • 大小受系统和浏览器分辨率影响
  • 像素px、(相对父元素比例)em，(相对父元素百分比)%，(相对html根元素比例)rem

推荐使用rem单位：

rem是CSS3新增的一个相对单位（root em，根em）。

通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

字体选项

属性	可选值	例子
字体颜色	color: 颜色名/十六进制/RGB;	color: #FF00FF; color: rgb(0, 0, 255); color: rgb(0%, 0%, 100%);
字体粗细	font-weight: lighter/normal/bold; font-weight: 100/400/700;	font-weight: bold;
字体倾斜	font-style: normal/italic/oblique; 注释: 正常/斜体/倾斜;	font-style: italic
英文小字	font-variant: normal/small-caps;	font-variant: small-caps;
字体大小	font-size	font-size: 10px;
一行高度	line-height	line-height: 20px;
字体集	font-family	font-family: "黑体","sans-serif"

字体简写

以上属性可以通过一行代码简写，可以优化和节省代码，具体配置方法如下：

font: 文字样式 font-variant 文字粗细 文字大小/行高 字体;
font: font-style font-variant font-weight font-size/line-height font-family;

其中font-size和font-family是必填项，且必须按这个顺序放在最后。

再次注意书写顺序，前三个属性顺序随意，最后两个属性必须按顺序固定在最后。

例子：

p { 
    font: 50px "黑体","sans-serif"; /* 最简写法 */
    font: italic small-caps bold 3rem/1.5em verdana,serif;  /* 六个属性写全 */
}

文本选项

行高

# 行高
line-height: 长度值 | 百分比 | em

• 行高
  • 字体所在行的高度，不是行间距
  • 直接设置像素值会固定行高度，不会随字体大小改变
  • em和百分比的设置是当前行字体大小的倍数
  • 浏览器有默认行高，不同浏览器默认行高不一样，一般是120%
  • 行高有继承性。注意继承是计算后的值，不是直接把em或%的值继承过来

首行缩进

# 首行缩进
text-indent: 2em;

字间距 | 词间距

# 字间距
letter-spacing: 1em;
# 词间距
word-spacing: 10px;

词间距是字间空格的间距

文本装饰

text-decoration: 下划线 | 上划线 | 贯穿线 | 闪烁 | 空效果(默认值)
text-decoration: underline | overline | line-througn | blink | none

• 不可继承

例子：

/* 去掉链接默认的下划线 */
a { text-decoration: none; }

文本对齐

文本水平对齐

text-align: left | right | center | justify

注意：

• 有继承性

• 只对块级元素设置有效

<div style="text-align:center"><img src="img/logo.png" /></div>

<span style="text-align:center">span标签属于行内元素，设置无效</span>

文本垂直对齐

设置元素内容的垂直方式

vertical_align: 基线 | 下标 | 上标 | 顶端 | 文字顶线 | 中线 | 底部 | 文本底线 | 长度 | 百分比

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | -+长度 | 百分比

**注意：**仅针对行内元素和单元格元素生效

垂直居中的应用

单行文字的垂直居中

<div style="height:400px; width:100%; border:1px blue solid; line-height:400px">
    <p>Welcome to Website</p>
</div>

直接设置行高与元素高度一样就可以垂直居中。

多行文字的垂直居中

<div style="height:100%; border:1px blue solid; display:table">
	<div style="display:table-cell; vertical-align:middle">
        <img />
        <h1>Welcome to Website</h1>
        <h2>CSS样式，用于网页样式设置，使网页更美观</h2>
    </div>
</div>

将div转换为表格，然后进行单元格文字垂直居中。

对块级元素本身进行居中

<div style="margin:0 auto">对块级元素本身相对父元素居中</div>