有没有人尝试过正则表达式将CSS字体字符串解析成不同的部分?
- 12像素Arial字体
- 斜体粗体无衬线字体
- 12像素/50像素Verdana字体
- 等等。
有没有人尝试过正则表达式将CSS字体字符串解析成不同的部分?
/^\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]
;
12px/30em verdana
是完全有效的,所以大小单位无法进行反向引用。 - user578895'
),通常用于括起具有空格的字体名称。我不关心其他边缘情况,但我正在使用您的正则表达式的变体,它还接受最后一组中的单引号。 - mo.font-stretch
只有 IE 和 FF 支持。我通常不关心那些没有广泛支持的功能 :) 特别是在这种情况下,包含它通常会导致浏览器忽略整个规则,因此虽然 FF 和 IE 可能在 font
中支持它,但最好将其作为自己的规则,以便其他浏览器不会完全忽略 font
规则。 - user578895支持解析名称带数字的字体,例如 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]+?)