font和文本样式⁍

font简写顺序： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

网页安全字体（通用）⁍
字体名称 泛型 注意
Arial sans-serif 通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier New monospace 某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。
Georgia serif
Times New Roman serif 某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。
Trebuchet MS sans-serif 您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdana sans-serif

详见 cssfontstack.com

通用字体族/默认字体⁍

名称 定义
serif 衬线体
sans-serif 无衬线体
monospace 等宽字体
cursive 手写体
fantasy 装饰体

font-family⁍

  • 有空格或特殊符号需要用单引号包围
  • 与字体族重名要用双引号包围
  • 字体栈 ( font stack ) 用逗号分隔

相关其他属性⁍

  • font-style：normal/italic/oblique（模拟斜体）
  • font-weight：字重 normal/bold/bolder/light/lighter/100~900（100的倍数）
  • font-size：…
其他样式

文本样式⁍

属于文本设置的范畴，但本质是给字本身添加样式

文字阴影⁍

你可以为你的文本应用阴影，使用 text-shadow 属性。这最多需要 4 个值，如下例所示：

1
text-shadow: 4px 4px 5px red;

4 个属性如下:

  1. 水平偏移，通常用px做单位。必须指定。
  2. 垂直偏移。必须指定。
  3. 模糊半径 ，默认为0，这意味着没有模糊。
  4. 阴影的基础颜色，默认为 black.

可以用逗号分隔，设置多重阴影

text-transform⁍

  • none: 防止任何转型。
  • uppercase: 将所有文本转为大写。
  • lowercase: 将所有文本转为小写。
  • capitalize: 转换所有单词让其首字母大写。
  • full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。

text-decoration⁍

  • none: 取消已经存在的任何文本装饰。
  • underline: 文本下划线.
  • overline: 文本上划线
  • line-through: 穿过文本的线

text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成

文本布局⁍

inline和block⁍

以正常的横向书写来讲，块级就是控制文本的纵向样式，行内就是控制文本的横向样式

  • 块级方向：当前书写模式下块级元素放置的顺序
  • 行内方向：行内元素书写的方向

书写方式可以通过writing-mode来指定，text-orientation可以用作改变文本方向

文本对齐（inline）⁍

用text-align：left/right/center/justify（两端对齐）

在CSS3中，新增了start、end，根据书写方向进行调整

行高（block）⁍

line-height

  • 可以设置为无单位的值，相当于乘以 font-size

  • 如果font-size是14px，line-height是18px，则多出来的4px，会被 分成两半 到上部分和下部分

  • 继承时，行高根据父元素的字号计算，而不根据子元素计算；而使用无单位的数字则没有这个问题，会应用到当前元素及所有其元素上，各元素根据自身行高进行计算

字母和单词间距（inline）⁍

letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。（必须有单位，除了默认0）

可能会受到text-align:justify;的影响

其他样式
  • text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。
  • text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。
  • white-space: 定义如何处理元素内部的空白和换行。
  • word-break: 指定是否能在单词内部换行。
  • direction: 定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。)
  • hyphens: 为支持的语言开启或关闭连字符。
  • line-break: 对东亚语言采用更强或更弱的换行规则。
  • text-align-last: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。
  • text-orientation: 定义行内文本的方向。
  • word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。
  • writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。

样式列表⁍

  • 缩进通过<ul>/<ol>的padding-left控制
  • 符号样式通过 list-style-type/position/image控制
    • 取消圆点：list-style(-type):none;
    • position有inside/outside（默认）两种，表示序号是否嵌入文本内
  • 管理计数一般通过HTML标签实现，例如<ol start="4" reversed>、<li value="2">

样式列表 - 学习 Web 开发 | MDN (mozilla.org)

样式化链接⁍

伪类⁍

常见属性⁍

  • color 文字的颜色
  • cursor 鼠标光标的样式，你不应该把这个关掉，除非你有非常好的理由。
  • outline 文字的轮廓 (轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有； 它只是设置在背景图片的顶部)。outline 是一个有用的辅助功能，所以在把它关掉之前考虑清楚；你至少应该将悬停 (hover) 状态的样式同时应用到选中 (focus) 状态上。
  • text-decoration
  • border
  • background

链接中插入图标⁍

给链接设置背景图片实现

1
2
3
4
5
a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; /*放在最右边，top距离0*/
  background-size: 16px 16px;
  padding-right: 19px; /*为背景图片留出空间*/
}

样式化链接为按钮⁍

略

@font-face/Web文本⁍

TODO!

Web 字体 - 学习 Web 开发 | MDN (mozilla.org)

  1. 在CSS开始定义@font-face块，用font-family定义名称，src指定字体链接
  2. 可以自定义本地font套件或者使用google fonts来插入在线字体服务