AS3文本处理：使用CSS格式化文本内容

一、在本文开始之前，我们先了解一下AS3中对html标签和css的支持情况：

1.  AS3中支持的HTML 标签 ：
<p>, <b>, <a>, <font>, <img>, <i>, <li>, <p>, <span>, <u>, <textformat>;
这些标签中<textformat>比较特殊，是使用AS中 TextFormat 类的段落格式来设置样式，具体信息参见官方文档；

2.  AS3中支持的css样式：

在AS中对css的支持是有限的，具体信息参照下表。另外AS中是以存储为 key/value 的对象来存储css属性的。

CSS 属性	ActionScript 属性	用法和支持的值
color	color	只支持十六进制颜色值。 不支持具有指定名称的颜色（例如 blue）。 颜色以下面的格式写入：#FF0000。
display	display	受支持的值为 inline、block 和 none。
font-family	fontFamily	用逗号分隔的供使用字体的列表，根据需要按降序排列。 可以使用任何字体系列名称。 如果您指定通用字体名称，它将转换为相应的设备字体。 支持以下字体转换：mono 转换为 _typewriter，sans-serif 转换为 _sans，serif 转换为 _serif。
font-size	fontSize	只使用该值的数字部分。 不分析单位（px、pt）；像素和磅是等价的。
font-style	fontStyle	可识别的值为 normal 和 italic。
font-weight	fontWeight	可识别的值为 normal 和 bold。
kerning	kerning	可识别的值为 true 和 false。 仅嵌入字体支持字距调整。 某些字体（如 Courier New）不支持字距调整。 只有 Windows 中创建的 SWF 文件支持 kerning 属性，而 Macintosh 中创建的 SWF 文件不支持该属性。 但是，这些 SWF 文件可以在 Flash Player 的非 Windows 版本中播放，并且仍可以应用字距调整。
leading	leading	两行之间统一分布的距离。 该值指定在每行之后添加的像素数。 负值将压缩两行之间的距离。 只使用该值的数字部分。 不分析单位（px、pt）；像素和磅是等价的。
letter-spacing	letterSpacing	两个字符之间统一分布的距离。 该值指定在每个字符之后添加的像素数。 负值将压缩两个字符之间的距离。 只使用该值的数字部分。 不分析单位（px、pt）；像素和磅是等价的。
margin-left	marginLeft	只使用该值的数字部分。 不分析单位（px、pt）；像素和磅是等价的。
margin-right	marginRight	只使用该值的数字部分。 不分析单位（px、pt）；像素和磅是等价的。
text-align	textAlign	可识别的值为 left、center、right 和 justify。
text-decoration	textDecoration	可识别的值为 none 和 underline。
text-indent	textIndent	只使用该值的数字部分。 不分析单位（px、pt）；像素和磅是等价的。

 以上信息来自官方文档。

  二、在AS中使用CSS：

AS中可以使用 Stylesheet 类将CSS样式添加到TextField文本框中的文本中，此时TextField的文本属性需要设置为htmlText;

StyleSheet 有两种方式来应用css样式：

1. 使用css文本，通过 StyleSheet 的 parseCSS 方法解析该css文本来应用CSS：

var cssTxt:String = 'p{font-family: 微软雅黑, Arial, sans-serif; font-size:12px;color:#666666;margin-right:20px;}';
var styleSheet:StyleSheet = new StyleSheet();
styleSheet.parseCSS(cssTxt);
var textField:TextField = new TextField();
textField.x = 315;
textField.y = 5;
textField.styleSheet = styleSheet;
textField.htmlText = "<p>这里是通过htmlText属性设置的文本内容啊</p>";
addChild(textField);

tips：在上述方法中，如果font-family的值被单引号包围，则font-family无效:

var cssTxt:String = "p{font-family:'微软雅黑, Arial, sans-serif'; font-size:12px;color:#666666;margin-right:20px;}";

 

改成 双引号 或 去掉引号 则可以，不知道这算一个bug么？！！

var cssTxt:String = 'p{font-family:"微软雅黑, Arial, sans-serif"; font-size:12px;color:#666666;margin-right:20px;}';

或：

var cssTxt:String = "p{font-family:微软雅黑, Arial, sans-serif; font-size:12px;color:#666666;margin-right:20px;}";

 

 2.使用通过 StyleSheet 的 setStyle 方法应用CSS：

var pStyle:Object = {"fontFamily":"微软雅黑, Arial, Helvetica, sans-serif", "fontSize":12, "color":"#666666"};
var styleSheet:StyleSheet = new StyleSheet();
styleSheet.setStyle("p", pStyle);

var textField:TextField = new TextField();
textField.x = 10;
textField.y = 10;
textField.styleSheet = styleSheet;
textField.htmlText = "<p>这里是通过htmlText属性设置的文本内容啊</p>";
addChild(textField);

 

此处查看该文demo，该demo的源文件