CSS 排版

记录 CSS 排版方面犯的各种强迫症，希望各浏览器加大力度。

中英混排

如果网页上中英文使用不同字体，CSS 声明里英文必须写在前面，然后英文字体就会把中文里的部分标点符号如引号等展示成半角状态。某乎这样对此强迫症的改用直角引号了。

但直角引号真的好麻烦鹅且我对其也有强迫症……

搜了一下发现其实可以用 @font-face 的 unicode-range 抽出中文字体。

@font-face {
  font-family: "CnSymbol";
  src: local("PingFang SC"), local("Sarasa Gothic SC"), local("Source Han Sans SC"), local("Noto Sans SC");
  unicode-range: U+00B7, U+2018-2019, U+201C-201D;
}css

需要注意 -apple-system 不能用在缩写式 font 开头，会被误认为变量。好像改了。

标点挤压

暂时采取的方案：

el.innerHTML = el.innerHTML
  .replace(/([：、，。！？；“”‘’（）「」『』《》【】]{2,})/g, (_, content) => {
    return `<span class="type-punctuation">${content.replace(/(.)/g, "<span>$1</span>")}</span>`;
  })
  .replace(/<span>([“‘（「『《【]<\/span>)/g, `<span class="type-punctuation-start">$1`);javascript

.type-punctuation span {
  font-feature-settings: "halt";
}
.type-punctuation span:not([class]) {
  margin-inline-end: .0625rem;
}css

怎么也调不出来 iOS 上除了引号的半角形态（明明 app 里可以），怀疑是 liga 之类的设置，考虑到一致性干脆抽思源标点了：

python -m fontTools.subset NotoSansSC-VariableFont_wght.ttf `
  --unicodes="U+2018-2019,U+201C-201D,U+2026,U+FF01,U+FF08-FF09,U+FF0C,U+FF1A-FF1B,U+FF1F,U+FF62-FF63,U+3001-3002,U+3008-301B" `
  --layout-features+=halt --layout-features+=locl --layout-features+=ccmp --layout-scripts="DFLT,latn,hani" `
  --glyph-names --retain-gids --no-hinting `
  --output-file=punctuation.woff2 --flavor=woff2powershell