2023年应该重新定义的CSS习惯（四）：字体属性、文本属性、换行属性

绝对长度值：如 px、pt、cm 等。
相对长度值：如 em、rem、% 等，相对于当前元素的字体大小进行计算。
无单位数值：表示元素字体大小的倍数。例如，1.5 表示将行高设为字体大小的 1.5 倍。

serif：衬线字体系列，如 Times New Roman、Georgia。
sans-serif：非衬线字体系列，如 Arial、Helvetica。
monospace：等宽字体系列，如 Courier New、Consolas。
cursive：手写风格字体系列，如 Comic Sans MS、Brush Script。
fantasy：奇幻风格字体系列，如 Impact、Papyrus。

medium：通常是浏览器的默认字号。
small：较小的字号。
large：较大的字号。
smaller：相对于父元素的字号更小。
larger：相对于父元素的字号更大。

normal：默认值，指定正常字体粗细。
bold：指定粗体字体。
bolder：相对于父元素更粗的字体。如果没有父元素，则与 bold 相同。
lighter：相对于父元素更细的字体。如果没有父元素，则与 normal 相同。
100 ~ 900：在多个级别上指定字体的粗细，其中数值越大表示越粗。

none：禁用字体合成，浏览器将只显示可用的字体，不会对字形和字距进行任何改变。
weight：启用字重合成，在没有特定字重可用时，浏览器将尝试通过混合不同字重的字体来实现相应的字重。
style：启用字体样式合成，在没有特定字体样式可用时，浏览器将尝试通过混合不同的字体来实现相应的字体样式。
auto：默认值，浏览器将根据需要自动选择是否应该使用字体合成，例如在字体设置为 italic 但仅有 regular 字体可用时，浏览器将尝试使用合成字体来实现 italic 效果。

normal：默认值，指定正常字体样式。
italic：指定斜体字体样式。
oblique：指定倾斜字体样式。

normal：默认值，表示使用字体的正常宽度。
ultra-condensed：表示使用非常紧缩的字体宽度。
extra-condensed：表示使用额外紧缩的字体宽度。
condensed：表示使用紧缩的字体宽度。
semi-condensed：表示使用半紧缩的字体宽度。
semi-expanded：表示使用半扩展的字体宽度。
expanded：表示使用扩展的字体宽度。
extra-expanded：表示使用额外扩展的字体宽度。
ultra-expanded：表示使用非常扩展的字体宽度。

这个属性主要用于确保在使用不同字体时，字体的整体显示大小保持一致。通过调整 font-size-adjust 值，可以在切换字体时保持一致的视觉尺寸，从而避免出现字体间的不协调。

auto：默认值，表示使用字体定义的设置。
normal：表示字距不开启调整。
none：表示禁用字符间字距调整。

normal：默认值，表示使用标准的连字显示方式。
none：表示禁用所有连字。
common-ligatures：表示启用常见连字，例如 “fi”、”fl”、”ff” 等。
no-common-ligatures：表示禁用常见连字。
discretionary-ligatures：表示启用自选连字，这些连字可能是更加装饰性的选择。
no-discretionary-ligatures：表示禁用自选连字。
historical-ligatures：表示启用历史连字，这些连字反映了历史上的书写习惯。
no-historical-ligatures：表示禁用历史连字。

normal：默认值，表示使用标准的字母大小写形式。
small-caps：表示使用小型大写字母。
all-small-caps：表示将所有字母都显示为小型大写字母形式。
petite-caps：表示使用比小型大写字母稍小的字母形式。
all-petite-caps：表示将所有字母都显示为比小型大写字母稍小的字母形式。

normal：默认值，表示使用标准的数字显示方式。
lining-nums：表示使用线形数字（1 2 3 4 5 6 7 8 9 0）。
oldstyle-nums：表示使用旧式数字（具有不同的基线和变体形态）。
proportional-nums：表示使用比例数字，每个数字的宽度可能不同。
tabular-nums：表示使用等宽数字，每个数字具有相同的宽度。
diagonal-fractions：表示支持使用斜线来显示分数。
stacked-fractions：表示支持使用堆叠方式来显示分数。

normal：默认值，表示使用标准的字符形态。
historical-forms：表示使用历史形态的字符，例如使用古老的字形或草书字形。
stylistic(value)：表示应用特定的风格变体。value 是一个整数或字符串，用于指定要应用的特定风格变体。
styleset(value)：表示应用特定的样式集。value 是一个整数或字符串，用于指定要应用的特定样式集。

normal：默认值，表示使用标准的字符显示方式。
ruby：表示适用于显示注音或拼音文字的样式。
jis78：表示使用 JIS 78 字符集的样式。
jis83：表示使用 JIS 83 字符集的样式。
jis90：表示使用 JIS 90 字符集的样式。
jis04：表示使用 JIS 2004 字符集的样式。
simplified：表示使用简化字形的样式。
traditional：表示使用繁体字形的样式。

normal：默认值，表示使用标准的上标和下标位置。
sub：表示将字母降低到基线以下的下标位置。
super：表示将字母升高到基线以上的上标位置。

没有自带的属性值。它只是一个通用属性，用于设置自定义字体变量，需要自己指定自定义属性名和属性值。这个属性主要用于实现一些复杂的字体效果，如逐渐变粗、倾斜等。不同的字体可能支持的自定义属性和属性值也不同，具体的使用细节需要参考相应字体的文档。这个属性需要一个 CSS 属性值对，其中第一个属性值是自定义属性名，第二个属性值则是指定的自定义属性值，例如：font-variation-settings: “wght” 700;

auto：默认值，表示浏览器自动选择适当的光学尺寸调整。通常会根据字体大小自动应用字体的光学尺寸变化。
none：禁用字体的光学调整。字体将按照其原始设计尺寸进行显示，不考虑字体大小。

需要注意的是，font-optical-sizing 属性可能需要特定的字体支持，并且在一些浏览器上的兼容性可能有所差异。因此，在使用这个属性时，最好做好测试以确保在目标环境中得到预期的效果。

十六进制表示法：以 # 开头，后跟六位或三位十六进制数值。例如：#000000 表示黑色，#FFFFFF 表示白色。
RGB 表示法：以 rgb() 开头，后跟由红、绿、蓝三个分量组成的数值，每个分量的取值范围是 0 到 255。例如：rgb(255, 0, 0) 表示红色，rgb(0, 255, 0) 表示绿色。
RGBA 表示法：与 RGB 表示法类似，但加上了透明度分量，透明度的取值范围是 0 到 1。例如：rgba(255, 0, 0, 0.5) 表示半透明的红色。
颜色关键字：预定义的一些颜色名称，例如 red、blue、green 等。

绝对长度值：如 px、pt、cm 等。
相对长度值：如 em、rem、% 等，相对于当前元素的字体大小进行计算。

由引号对组成的列表，每对引号包含两个值：开启引号和关闭引号。可以定义多个引号对，并通过设置 quotes 属性来指定在不同的嵌套层级中使用哪个引号对。例如：q { quotes: “«” “»” “‘” “’”; }

left：将文本左对齐。
right：将文本右对齐。
center：将文本居中对齐。
justify：将文本两端对齐，通过添加额外的空格调整行的宽度。

auto：默认值，浏览器根据其它样式自动计算。
left：将最后一行文本左对齐。
right：将最后一行文本右对齐。
center：将最后一行文本居中对齐。
justify：将最后一行文本两端对齐。
start：与 left 类似，根据文本书写方向决定对齐方向。
end：与 right 类似，根据文本书写方向决定对齐方向。

用长度值（如像素、百分比等）来指定缩进的大小。正值表示向右缩进，负值表示向左缩进。
用百分比值来指定缩进的相对大小。相对于父元素的宽度计算，正值表示向右缩进，负值表示向左缩进。

auto：默认值，由浏览器自动决定如何对齐和换行文本。
none：不进行对齐或换行处理。
inter-word：尝试在单词之间进行对齐和换行，以保持连续的单词清晰可读。
inter-character：将字符间的空隙拉伸或压缩，使文本的行长度相等。

需要注意的是，text-justify 属性可能在不同的浏览器中具有不同的效果，并且只有当文本在多行中进行对齐时才会生效。此外，该属性主要适用于非拉丁文本（如中文、日文、韩文等），对于大部分拉丁文本而言，text-align: justify 而不是 text-justify 更常见并有效。

text-decoration-color：指定文本装饰（如下划线、删除线等）的颜色。
text-decoration-line：指定要应用的文本装饰线条的类型，如下划线、删除线等。
text-decoration-style：指定文本装饰线条的样式，如实线、虚线等。
text-decoration-thickness：指定文本装饰线条的粗细程度。
text-decoration-skip：指定装饰线在文本之间是否跳过特定元素（如图片或链接）的显示。
text-decoration-skip-ink：指定装饰线在链接附近是否避免墨水溅出的交互效果。

这个属性接受一个长度值或百分比值作为参数，表示下划线相对于基线的偏移量。正值将下划线向上移动，负值将下划线向下移动。

auto：默认值，浏览器根据字体和文本大小自动确定下划线的位置。
under：将下划线置于文本的基线以下。
left：将下划线置于文本的左边界以下。
right：将下划线置于文本的右边界以下。

使用 text-stroke 属性可以为文本添加描边效果，从而增强文字的可读性或视觉效果。需要注意的是，目前使用 webkit 浏览器需要添加前缀，例如：-webkit-text-stroke: 2px #000000

text-emphasis-style：指定文本的强调样式，如圆点、实心、双线等。
text-emphasis-color：指定文本的强调颜色。

使用 text-shadow 属性可以为文本添加阴影效果，使文本在页面中更加突出和有层次感。这个属性可以用于标题、标语和其他需要视觉吸引力的文本元素。通过调整偏移量、模糊半径和颜色等参数，可以创建不同样式和效果的阴影。

none：默认值，不进行任何转换，保持文本的原始大小写形式。
capitalize：将每个单词的首字母转换为大写。例如，”hello world” 转换为 “Hello World”。
uppercase：将所有字母转换为大写。例如，”hello world” 转换为 “HELLO WORLD”。
lowercase：将所有字母转换为小写。例如，”Hello World” 转换为 “hello world”。
full-width：将文本转换为全角字符形式。例如，”hello world” 可能转换为 “ｈｅｌｌｏ　ｗｏｒｌｄ”（注意这里的空格变成了全角空格）。

normal：只在允许的换行点进行换行。
balance：文本根据内容宽度，自适应换行
nowrap：文本不会换行，会在一行中显示。
wrap：文本在必要时进行换行。

clip：默认值，超出容器的文本将被剪切，不显示省略号或其他指示符号。
ellipsis：在超出容器的文本末尾显示省略号（…）。适用于单行文本。
fade：超出容器的文本逐渐变得透明，并在后面显示一个淡出效果。适用于单行文本。
truncate：在超出容器的文本末尾截断，不显示省略号，但鼠标悬停时会显示完整的文本内容。适用于单行和多行文本。

由于在移动设备上，浏览器会根据设备的像素密度和分辨率进行文本的放大和缩小以适应屏幕大小，这可能导致网页上的文本在不同设备上显示的大小不一致。text-size-adjust 属性可以用来解决这个问题。

auto：默认值，由浏览器决定是否进行文本大小调整。
none：禁止浏览器对文本大小进行调整。
%：指定一个百分比值，表示在移动设备上调整文本大小的程度。

horizontal-tb：默认值。横排，上到下为行，左向右书写。
vertical-rl：竖排，右到左为行，右向左书写（在大部分东亚国家中常见）。
vertical-lr：竖排，左到右为行，左向右书写（在蒙古、藏语等语言中使用）。

使用 writing-mode 属性时还需要考虑文本容器的宽度和高度，以确保文本能够正确地按照指定的书写模式进行排布。属性 lr、rl、tb、lr-tb、rl-tb、tb-rl 为 IE 时代旧属性，作用已被上述取代。

mixed：默认值，文本按照字母的书写方向进行显示，默认是水平排列。
upright：将文本以垂直方向排列，一般用于东亚文字（如中文、日文、韩文）的竖排版。
sideways：将文本以垂直方向排列，但每个字符是旋转的，适用于西方文字的竖排版。

此外，text-orientation 属性通常与其他 CSS 属性（如 writing-mode、text-combine-upright 等）一起使用，以实现更精细的文本排列效果。

none：默认值，不进行字符合并操作。
all：将连续的字符合并为一个整体，适用于竖排版的文本。

auto：根据浏览器的默认设置进行文本渲染。这是默认值。
optimizeSpeed：以更快的速度呈现文本，可能会牺牲一些质量。适用于需要追求性能的场景。
optimizeLegibility：以最大程度提高可读性为目标来呈现文本。适用于需要强调文本清晰度和可读性的场景。
geometricPrecision：使用几何精确度来呈现文本，尽可能准确地显示字形边缘和细节。

normal：默认值。空白字符会被合并，连续的空白字符会被替换为单个空格，并根据需要进行换行。
nowrap：空白字符不会被合并，不会进行换行，文本会在一行内显示，超出宽度的部分会被裁剪。
pre：空白字符不会被合并，保留原始的空白字符，文本按照预设的空白字符进行换行。
pre-wrap：空白字符不会被合并，保留原始的空白字符，文本按照预设的空白字符进行换行，如果需要会进行自动换行。
pre-line：空白字符会被合并，连续的空白字符会被替换为单个空格，文本按照预设的空白字符进行换行，如果需要会进行自动换行。

collapse：合并所有相邻、连续的空白符为一个空格。如果两个非空内容之间没有空格，则会删除这两个内容之间多余的空白。
preserve：保留所有空白字符，不进行折叠或者删除。

none：默认值。禁用断字，即不允许单词在行末进行断字处理。
auto：根据语言的断字规则自动进行断字处理。这是最常用的取值。
manual：手动指定断字位置，可以通过在单词内部插入 “­” 或 ­ 来标记断字位置。

接受一个字符串值，用于设置断字字符的样式。这个字符通常是一个连字符（减号），用于表示单词的断字位置。例如 p { hyphenate-character: “-“; }，将断字字符设置为连字符（减号）。需要注意的是，hyphenate-character 属性通常与 hyphens 属性一起使用。前者用于指定断字字符的样式，后者用于启用断字规则并控制断字的方式。

在一些语言中，可能存在特殊的断字字符或断字标志，例如中文中的“〇”或日文中的“ー”。在这种情况下，可以使用这些特殊字符作为 hyphenate-character 的值。

接受一个整数值，用于指定一个单词必须具有的最小字符数才能进行断字处理。例如 p { hyphenate-limit-chars: 5; }，将设置断字的最小字符数为 5 个字符。只有长度大于或等于 5 的单词才会被考虑进行断字处理。

需要注意的是，hyphenate-limit-chars 属性通常与 hyphens 属性一起使用。前者用于指定断字的最小字符数，后者用于启用断字规则并控制断字的方式。通过设置 hyphenate-limit-chars 来限制断字的最小字符数可以防止对短单词进行断字处理，从而提高排版的可读性和美观性。

normal（默认值）：使用默认的断行规则，即在允许的断字点进行断行。
break-all：允许在任意字符内断行，即无论是否是单词内部都可以进行断行。
keep-all：尽量避免在 CJK 字符之间断行，适用于中日韩文本，保持连续的整体性。

绝对长度值：如 px、pt、cm 等。
相对长度值：如 em、rem、% 等，相对于当前元素的字体大小进行计算。

normal（默认值）：默认情况下，长单词或长字符串不会被强制换行，而是会超出容器边界显示。
break-word：允许长单词或长字符串在任意字符内断行，即使它们超出了容器边界。
anywhere：类似于 break-word，但是还允许在任何字符之间断行，而不仅限于单词边界。

需要注意的是，word-wrap 属性已被 CSS3 中的新属性 overflow-wrap 替代。在大多数情况下，应优先使用 overflow-wrap，而不是 word-wrap。

normal（默认值）：默认情况下，长单词或长字符串不会被强制换行，而是会超出容器边界显示。
break-word：允许长单词或长字符串在任意字符内断行，即使它们超出了容器边界。