前端TIps —通过正则表达解析css的font参数

1、css font

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。

font: 1.2em "Fira Sans", sans-serif;
font: italic 1.2em "Fira Sans", serif;
font: italic small-caps bold 16px/2 cursive;
font: small-caps bold 24px/1 sans-serif;

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font

2、解析 font

const fontRegEx = new RegExp(
  [
    '^\\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*$',
  ].join(''),
  'i'
);
const fontRegExMatchIndex = [
  'style',
  'variant',
  'weight',
  'size',
  'lineHeight',
  'family',
];

/**
 * Get the list of font families from a font spec.  Note that this doesn't work
 * for font families that have commas in them.
 * @param {string} fontSpec The CSS font property.
 * @return {FontParameters} The font parameters (or null if the input spec is invalid).
 */
export const getFontParameters = function (fontSpec) {
  const match = fontSpec.match(fontRegEx);
  if (!match) {
    return null;
  }
  const style = /** @type {FontParameters} */ ({
    lineHeight: 'normal',
    size: '1.2em',
    style: 'normal',
    weight: 'normal',
    variant: 'normal',
  });
  for (let i = 0, ii = fontRegExMatchIndex.length; i < ii; ++i) {
    const value = match[i + 1];
    if (value !== undefined) {
      style[fontRegExMatchIndex[i]] = value;
    }
  }
  style.families = style.family.split(/,\s?/);
  return style;
};

来源：openlayers的css.js文件

3、测试

JSON.stringify(getFontParameters('1.2em "Fira Sans", sans-serif'));

{"lineHeight":"normal","size":"1.2em","style":"normal","weight":"normal","variant":"normal","family":"\"Fira Sans\", sans-serif","families":["\"Fira Sans\"","sans-serif"]}

JSON.stringify(getFontParameters('italic 1.2em "Fira Sans", serif'));
{"lineHeight":"normal","size":"1.2em","style":"italic","weight":"normal","variant":"normal","family":"\"Fira Sans\", serif","families":["\"Fira Sans\"","serif"]}

JSON.stringify(getFontParameters('italic small-caps bold 16px/2 cursive'));
{"lineHeight":"2","size":"16px","style":"italic","weight":"bold","variant":"small-caps","family":"cursive","families":["cursive"]}

JSON.stringify(getFontParameters('small-caps bold 24px/1 sans-serif'));
{"lineHeight":"1","size":"24px","style":"normal","weight":"bold","variant":"small-caps","family":"sans-serif","families":["sans-serif"]}

JSON.stringify(getFontParameters('caption'));

说明：不适用于系统字体：

font:  caption | icon | menu | message-box | small-caption | status-bar;