CSS Inline

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-stretch
• font-kerning
• font-feature-settings
• 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/

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
• text-edge
• leading-trim
  • Leading-Trim: The Future of Digital Typesetting
• 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

• About
  • https://www.w3.org/TR/css-inline-3/
  • https://www.w3.org/TR/css-rhythm-1/

CSS Text

• white-space
  • white-space: normal/nowrap/pre/pre-wrap/pre-line
  • 去掉空白
    • white-space-collapsing: discard
    • How to remove the space between inline/inline-block elements?
    • 父级标签设置 font-size: 0; 子级标签再还原字体大小
• letter-spacing
• word-spacing
• tab-size
• text-align
• text-align-last
• text-indent
• text-justify
  • inter-word
  • inter-character
• text-size-adjust
• hyphenate-limit-chars
• hanging-punctuation
• hyphens
• overflow-wrap
• line-break
• word-break
  • word-break: normal/break-all/keep-all
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text
• text-wrap
  • https://clagnut.com/blog/2424
• text-overflow
• text-transform
• 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
• About
  • https://www.w3.org/TR/css-writing-modes-4/

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/

entity-names

• 实体
  • ← ↑ → ↓
  •  (1:1 空格)  (1:2 空格)  (Space) 　(全角空格)
  • √(对勾) ×(乘号) ×
  • ”(”) ‘(‘) ’(’)
  • ‹ (‹) ›(›) «(«) »(»)
  • ℃(℃) ℉(℉)
  • ☜(☜) ☞(☞)
  • ™(™)
  • ★(★) ☆(☆)
  • ¥(日元) €(欧元) £(英镑) $(美元) ¥(人民币)
  • © ®
• About
  • https://www.w3.org/TR/xml-entity-names/

其它

• 多行
  • 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/clreq/
• https://www.w3.org/TR/?tag=css
• https://www.w3.org/TR/css-display-3/