解析任何CSS字体的正则表达式

Question

有没有人尝试过正则表达式将CSS字体字符串解析成不同的部分？

• 12像素Arial字体
• 斜体粗体无衬线字体
• 12像素/50像素Verdana字体
• 等等。

- user578895

---

可能是重复的问题：如何解析CSS字体缩写格式。 - stema

Answer 1

回答自己的问题：

/^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\"\sa-z]+?)\s*$/i

这将被拆分为：

var       parts = rx.exec( str )
  , fontStyle   = parts[1] || 'normal'
  , fontVariant = parts[2] || 'normal'
  , fontWeight  = parts[3] || 'normal'
  , fontSize    = parts[4]
  , lineHeight  = parts[5]
  , fontFamily  = parts[6]
  ;

是的，我明白这很疯狂。

- user578895

---

@ErikReppen -- 我认为我无法再压缩它了 :) 因为 12px/30em verdana 是完全有效的，所以大小单位无法进行反向引用。 - user578895

太棒了！我发现了一些古怪的边缘情况...例如，您可以指定三个可选的前导术语为斜体，而它不会报错。我还没有尝试看浏览器实际上如何处理这种愚蠢的情况。更严重的情况是特殊字符会破坏字体名称部分。特别是单引号（'），通常用于括起具有空格的字体名称。我不关心其他边缘情况，但我正在使用您的正则表达式的变体，它还接受最后一组中的单引号。 - mo.

它不应该在字重之后支持字体拉伸吗？https://developer.mozilla.org/en-US/docs/Web/CSS/font#font-variant-css21 - jedmao

@jedmao -- font-stretch 只有 IE 和 FF 支持。我通常不关心那些没有广泛支持的功能 :) 特别是在这种情况下，包含它通常会导致浏览器忽略整个规则，因此虽然 FF 和 IE 可能在 font 中支持它，但最好将其作为自己的规则，以便其他浏览器不会完全忽略 font 规则。 - user578895

如何在Node中使用Lodash分离简单的字体大小，例如“10px”？ - stackdave

Answer 2

您是指像这样吗？

如何解析CSS字体缩写格式

此外，还有一个名为JSCSSP的JavaScript库，用于解析CSS。

- zpea

---

无法使用已接受的答案，因为此代码有时在node.js中运行，因此无法使用dom-parsing。下面的答案可能有效，需要测试一下。 - user578895

Answer 3

支持解析名称带数字的字体，例如 Font Awesome（示例：Font Awesome 5 Free）的小修复。

此正则表达式：

/^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\"\sa-z0-9]+?)\s*$/i

这个代码段分成：

    var       parts = rx.exec( str )
  , fontStyle   = parts[1] || 'normal'
  , fontVariant = parts[2] || 'normal'
  , fontWeight  = parts[3] || 'normal'
  , fontSize    = parts[4]
  , lineHeight  = parts[5]
  , fontFamily  = parts[6]
  ;

只需编辑 fontFamily 规则块，如 ([-,"\sa-z0-9]+?)

- Pablo Alcaraz Martinez