CSS Fonts

• font
  • font-family
    • system-ui
    • Web fonts
  • font-size
    • How Do You Do max-font-size in CSS?
  • font-style
  • font-weight
    • 字体并不一定按规范设计，因此在 css 使用这些字体时会存在 fallback 机制
• unicode-range
  • 可指定使用特殊字体的字符范围
• font-variant
  • font-variant-position
  • font-variant-numeric
  • font-variant-ligatures
  • font-variant-east-asian
  • font-variant-caps
  • font-variant-alternates
• font-size-adjust
  • font-size-adjust Is Useful
• font-stretch
• font-kerning
• font-feature-settings
• text-size-adjust
• About
  • https://www.w3.org/TR/css-fonts-3/
  • https://www.w3.org/TR/css-fonts-4/
  • https://www.w3.org/TR/css-fonts-5/
  • https://developer.chrome.com/blog/font-fallbacks/
  • https://gwfh.mranftl.com/fonts/inter?subsets=latin 部署 google font

CSS Inline

• vertical-align
  • dominant-baseline
    • 对齐框内内容的默认基线
    • The child box is aligned to its parent by matching up their alphabetic baselines.
    • 如果行内框根本不包含内容，则会认为它包含一个“支柱”（一个不可见的零宽度字形）框，用于做基线对齐
      • demo:
        内容在 height: 40px 的盒子里垂直居中
  • baseline-source.
    • demo:
      1. inline-block 使用 last 对齐：test
         line1
         line2
      2. inline-flex 使用 first 对齐：test
         line1
         line2
    • 一个 inline-block 元素，如果里面没有 inline 内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘。demo:
      test
  • alignment-baseline
  • alignment-shift
• line-height
  • inline 元素高度由 height 决定；没有定义 height , 由 line-height/text-edge/leading-trim/inline-sizing 决定
  • 如果 line-height 指定的大小小于框的大小，背景和边框会“渗入”相邻的行框，可能会遮盖前面的内容
    • demo:
      如果 line-height 指定的大小小于框的大小，背景和边框会“渗入”相邻的行框，可能会遮盖前面的内容
  • Why is the span’s line-height useless?
• line-height-step
  • 让内容占据的行高是 line-height-step 属性值的整数倍
• initial-letter
• text-box-trim
  • Leading-Trim: The Future of Digital Typesetting
  • 文本框修剪如何使用
• text-box-edge
  • text-edge
• text-box
• About
  • https://www.w3.org/TR/css-inline-3/
  • https://www.w3.org/TR/css-rhythm-1/

CSS Text

• overflow-wrap/word-wrap

  • overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing
  • normal
  • anywhere 1) 任意可插入断行位置尽可能插入 2) 再强制断行防止溢出[overflow]
  • break-word 强制断行防止溢出[overflow] - unbreakable words allowed to be broken at arbitrary points

• line-break 处理多语言混排时换行策略

  • auto, 会倾向于避免在中英文中间断行，或避免在标点符号后断开 [chatgpt]
  • normal
  • loose
  • strict, 严格遵守行首行尾禁则
  • anywhere

• word-break

  • normal, 英文：单词不会中断，只会在空格或连字符 - 等合法断点换行; CJK 文字可以在任意字符之间断行 (特殊标点符号除外)
    • 禁止出现在行首的标点 - 、, 。, ，, ！, ？, ）, 》, 】
    • 禁止出现在行末的标点 - “, ‘, （, 《, 【
  • break-all, Word breaks should be inserted between any two characters; (excluding Chinese/Japanese/Korean text)
  • keep-all, Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal
  • break-word 效果和 overflow-wrap: anywhere; work-break: normal; 相同
  • auto-phrase
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text

• text-wrap shorthand

  • text-wrap-style
    • auto
    • balance
    • pretty
    • stable
  • text-wrap-mode
    • wrap
    • nowrap
  • https://clagnut.com/blog/2424
  • https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/
  • https://codepen.io/jensimmons/full/xxvoqNM
  • https://x.com/jimmeyer/status/1746479830818824347
  • flex-wrap: balance

• text-overflow

• white-space-collapse

  • collapse
  • preserve
  • preserve-breaks
  • preserve-spaces
  • break-spaces

• white-space 单个值 或者 [white-space-collapse]/[text-wrap-mode] 两个值

  • normal
  • nowrap
  • pre
  • pre-wrap
  • pre-line
  • 去掉空白
    • How to remove the space between inline/inline-block elements?
    • 父级标签设置 font-size: 0; 子级标签再还原字体大小

• hyphenate-character 定义连字符是什么

• hyphenate-limit-chars 定义使用连字符策略

• hyphens - ­

  • none
  • manual
  • auto

• hanging-punctuation

  • 使用 text-indent: -0.577em 将引用的起始引号左移，实现“光学对齐” Ref

  • https://www.thetype.com/2017/11/13290/#hanging-web

• letter-spacing

• word-spacing

• text-spacing-trim

  • https://output.jsbin.com/figixaq

• text-autospace

  • https://webkit.org/blog/16574/webkit-features-in-safari-18-4/#css
  • https://developer.chrome.com/blog/css-i18n-features
  • https://x.com/yisibl/status/1944679763991568639

• tab-size

• text-align

• text-align-last

• text-indent

• text-justify

  • inter-word
  • inter-character

• About

  • https://www.w3.org/TR/css-text-3/
  • https://www.w3.org/TR/css-text-4/
  • https://drafts.csswg.org/css-size-adjust/

CSS Text Decoration

• text-decoration
  • text-decoration-line
    • overline/underline/line-through
      • 支持同时设置两个值
      • text-underline-offset
      • text-underline-position
  • text-decoration-color
  • text-decoration-style
    • solid/double/dotted/dashed/wavy
  • text-decoration-thickness
  • text-decoration-skip
  • text-decoration-skip-ink
• text-emphasis
  • text-emphasis-style
  • text-emphasis-position
  • text-emphasis-color
• text-shadow
  • -webkit-background-clip: text;
  • -webkit-text-fill-color: transparent;
• About
  • https://www.w3.org/TR/css-text-decor-3/

CSS Writing Modes

• writing-mode
  • https://www.zhihu.com/question/20874144
• text-orientation
• text-combine-upright
• direction
  • ltr/rtl
• unicode-bidi
• text-transform
• About
  • https://www.w3.org/TR/css-writing-modes-4/
  • reading-flow

CSS Break

• break-after, break-before and break-inside
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fragmentation
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media old: page-break-before, page-break-after and page-break-inside
• About
  • https://www.w3.org/TR/css-break-3/
  • https://www.w3.org/TR/css-break-4/

CSS Content

• content 伪类
  • ‘\A’
• quotes
• About
  • https://www.w3.org/TR/css-content-3/

unicode/codepoint

换行字符 - JavaScript 正则表达中 . 默认不匹配字符

• \n, Line Feed, LF, 换行符 \u000A
• \r, Carriage Return, CR, 回车符 \u000D
• \u2028, Line Separator, 强制换行 (视觉)
• \u2029, Paragraph Separator, 段落分隔符 (段落)

空白字符 - JavaScript 正则表达中 \s 匹配字符

• \n \r \u2028 \u2029
• \t, Tab \u0009
• \f, 换页/分页符 \u000C
• \v, 垂直制表符 \u000B
• \u0020 space 空格
• \u00a0, non-breaking space NBSP
• \u1680 Ogham 文字系统中的空白
• \u2000-\u200a 用于精细排版，表示不同宽度的空白
• \u202f 法语、俄语等语言中，用于数字与单位之间的空格; 是 non-breaking space
• \u205f 数学排版中，用于控制符号之间的间距，来自 TeX、LaTeX 排版系统的 spacing 定义；可以断行
• \u3000 全角，CJK Symbols; 用于中文、日文、韩文中排版/视觉上对称; 过去在打印文本或电子书中较为常见，现在也偶尔用于美观排版
• \ufeff BOM [byte-order mark], 字节顺序标记 - 高端/低端字节顺序

零宽[不可见]字符

• \u200B 零宽度空格，不影响显示，但允许折行
• \u200C 零宽度非连接符，防止两个字形连写
• \u200D 零宽度连接符，强制将两个字符连写为组合形式 example: 👩\u200D💻 显示为 👩‍💻

“特殊”字符

• \uFFFD - 当解析异常时, 使用 � 表示

Emoji

• U+FE0F 变异字符，VS16[Variation Selector-16]; This codepoint may change the appearance of the preceding character. If that is a symbol, dingbat or emoji, U+FE0F forces it to be rendered as a colorful image as compared to a monochrome text variant.
• Emoji If Emoji=No, then Emoji_Presentation=No, Emoji_Modifier=No, and Emoji_Modifier_Base=No
• Emoji_Presentation 本身是 emoji, 图形符号而非文本，且有一部分支持继续使用 Modifier 改样式
• Emoji_Modifier_Base 本身是 emoji，可以使用 modifier 改样式
• Emoji_Modifier 本身不是 emoji, 用来修饰，比如颜色; \UFE0F
• Emoji_Component 本身不是 emoji，在 emoji 组合中会被用作“组件”，使用上面提到的 \U200D 连接
• Extended_Pictographic 扩展，All
• Ref

实体

• ← ↑ → ↓
•  (1
  空格)  (1
  空格)  (Space) 　(全角空格)
• √(对勾) ×(乘号) ×
• ”(”) ‘(‘) ’(’)
• ‹ (‹) ›(›) «(«) »(»)
• ℃(℃) ℉(℉)
• ☜(☜) ☞(☞)
• ™(™)
• ★(★) ☆(☆)
• ¥(日元) €(欧元) £(英镑) $(美元) ¥(人民币)
• © ®

• About
  • https://www.w3.org/TR/xml-entity-names/
  • https://tonsky.me/blog/unicode/

其它

• 多行
  • demo:
    适用于 Linux 的 Windows 子系统可让开发人员按原样运行 GNU/Linux 环境 - 包括大多数命令行工具、实用工具和应用程序 - 且不会产生传统虚拟机或双启动设置开销。
  • code:

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;

• 需求：文本内容很少，只占一行时，居中对齐显示; 文本内容超过一行时，居左对齐显示

  • 方案 1: display: flex/inline-flex; justify-content: center;

    • code:
    文本内容很少，只占一行时，居中对齐显示
    文本内容很少，只占一行时，居中对齐显示; 文本内容超过一行时，居左对齐显示

  • 方案 2: 父容器 text-align: center; 自身节点 display: inline-block; + text-align: left;

    • code:
      文本内容很少，只占一行时，居中对齐显示
      文本内容很少，只占一行时，居中对齐显示; 文本内容超过一行时，居左对齐显示
• https://compat.spec.whatwg.org/
• 中文排版需求
• https://www.w3.org/TR/?tag=css
• https://www.w3.org/TR/css-display-3/
• https://web.dev/learn/css/typography