CSS文本原创邦

CSS文本

字体颜色
color: 文本等前景色，the color of the foreground
text-decoratin: such as underline or overline
字体族
font-family: arial; 如果机器上有这个字体，那么就会生效，否则用浏览器默认的字体。a browser default font

可以看看这个网站，来觉得你用什么字体 https://www.cssfontstack.com/
当然你也可以用自定义字体：https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts

最常用的字体单位： px（pixels) ; em (父类元素的font-size = 1em); rem (html里面设置的font-size = 1rem);
用rem，这样计算会简单点。

字体的粗细常用四个属性：

font-style: normal/italic/oblique
font-weight: normal/lighter,bolder(相比父元素)/100-900
text-transform: none/uppercase/lowercase/capitalize/full-width(固定长宽，就像汉字一样)
text-decoration: none/underline/overline/line-through
- text-decoration-line: line-thorugh;
- text-decoration-style: wavy;/solid/double/dotted/dashed/wavy/
- text-decoration-color: red
- text-decoration: line-through red wavy; 红色波浪线

字体的阴影
text-shadow: 4px 4px 5px red; (水平偏移，垂直偏移，blur radius模糊半径，颜色）

可设置多个阴影：

text-shadow: 1px 1px 1px red,
             2px 2px 1px red;

这里你可以找到更多有趣的阴影： https://www.sitepoint.com/moonlighting-css-text-shadow/

text的布局
text-align: left/right/center/justify

行高
line-height，推荐值： 1.5-2，更容易阅读。

字间距和词间距
letter-spacing: 4px;
word-spacing: 4px;

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

其它需要知道的一些属性：
Font styles:

font-variant: Switch between small caps and normal font alternatives.
font-kerning: Switch font kerning options on and off.
font-feature-settings: Switch various OpenType font features on and off.
font-variant-alternates: Control the use of alternate glyphs for a given font-face.
font-variant-caps: Control the use of alternate capital glyphs.
font-variant-east-asian: Control the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.
font-variant-ligatures: Control which ligatures and contextual forms are used in text.
font-variant-numeric: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.
font-variant-position: Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.
font-size-adjust: Adjust the visual size of the font independently of its actual font size.
font-stretch: Switch between possible alternative stretched versions of a given font.
text-underline-position: Specify the position of underlines set using the text-decoration-line property underline value.
text-rendering: Try to perform some text rendering optimization.

Text layout styles:

text-indent: Specify how much horizontal space should be left before the beginning of the first line of the text content.
text-overflow: Define how overflowed content that is not displayed is signaled to users.
white-space: Define how whitespace and associated line breaks inside the element are handled.
word-break: Specify whether to break lines within words.
direction: Define the text direction (This depends on the language and usually it's better to let HTML handle that part as it is tied to the text content.)
hyphens: Switch on and off hyphenation for supported languages.
line-break: Relax or strengthen line breaking for Asian languages.
text-align-last: Define how the last line of a block or a line, right before a forced line break, is aligned.
text-orientation: Define the orientation of the text in a line.
overflow-wrap: Specify whether or not the browser may break lines within words in order to prevent overflow.
writing-mode: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.

writing-mode也很有意思，可以写古体。

font： font-style font-variant,font-weight, font-stretch,font-size,line-height, font-family

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

阅读量: 661
发布于: 2021-07-21
修改于: 2021-07-21