如何解析CSS字体速记格式 [英] How to parse CSS font shorthand format

问题描述

我需要将CSS字体速记格式解析为单独的组件（font-family，font-size，font-weight，...）。这种速记格式看起来很复杂。这里有两个例子：

  10px sans-serif 
 bold italic small-caps 1em / 1.5em verdana，sans- serif 
  

在我开始为它编写解析器之前，是否有一个已经存在的解析器（最好用JavaScript编写）？

解决方案

这里是一个临时DOM元素并使用jquery的css p>

http://jsfiddle.net/thirtydot/tpSsE / 2 /

  var $ test = $（'< span />'） 
 $ test.css（'font'，'bold italic small-caps 1em / 1.5em verdana，sans-serif'）; 
 
 alert（$ test.css（'fontWeight'））; 
 alert（$ test.css（'fontStyle'））; 
 alert（$ test.css（'fontVariant'））; 
 alert（$ test.css（'fontSize'））; 
 alert（$ test.css（'lineHeight'））; 
 alert（$ test.css（'fontFamily'））; 
  

I need to parse the CSS font shorthand format into the separate components (font-family, font-size, font-weight, ...). This shorthand format looks pretty complicated. Here are two examples:

10px sans-serif
bold italic small-caps 1em/1.5em verdana,sans-serif

Before I start writing a parser for it, is there an already existing parser out there I could use (Preferably written in JavaScript)?

解决方案

Here's a "temporary DOM element and using jquery's css() function" solution:

http://jsfiddle.net/thirtydot/tpSsE/2/

var $test = $('<span />');
$test.css('font', 'bold italic small-caps 1em/1.5em verdana,sans-serif');

alert($test.css('fontWeight'));
alert($test.css('fontStyle'));
alert($test.css('fontVariant'));
alert($test.css('fontSize'));
alert($test.css('lineHeight'));
alert($test.css('fontFamily'));

​

这篇关于如何解析CSS字体速记格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！