实例解析Flex字体的使用

开发 后端
本文通过实例向大家介绍一下Flex字体使用,Flex主要支持的TrueType和OpenType类型的字体,它们之间又有什么区别和联系呢,请看本文具体介绍。

在学习Flex的过程中,你可能会遇到Flex字体使用问题,这里和大家分享一下,相信通过本文的介绍你对Flex字体的使用会有深刻的认识。今天在把玩开源的Flex系统和控件时碰到了字体不能编译的问题,所以对字体进行了较为深入的研究。

Flex支持的TrueType和OpenType类型的字体

这里介绍一下他们之间的区别

◆TrueType字体可调整到任意大小,并且在所有大小情况下,都是清晰可读的。可以将它们发送给Windows支持的任何打印机或其他输出设备。

◆OpenType字体与TrueType字体相关,但包括更大的基本字符集扩展,包括小型大写、老样式数字及更复杂的形状,如“字形”和“连字”。

Flex字体的使用

以下个例子是使用本地的字体,这些字体读取的默认路径是C:\WINDOWS\Fonts,在你把玩别人的Flex应用时,你需要注意他人的字体你是否都有了。

  1. viewplaincopytoclipboardprint?  
  2. <mx:Style> 
  3. @font-face  
  4. {  
  5. src:local("Tahoma");  
  6. fontFamily:localFont;  
  7. fontWeight:bold;  
  8. }  
  9. </mx:Style> 
  10. <mx:ButtonfontFamilymx:ButtonfontFamily="localFont"label="TryMe"/> 
  11. <mx:Style> 
  12. @font-face  
  13. {  
  14. src:local("Tahoma");  
  15. fontFamily:localFont;  
  16. fontWeight:bold;  
  17. }  
  18. </mx:Style> 
  19. <mx:ButtonfontFamilymx:ButtonfontFamily="localFont"label="TryMe"/> 
  20.  

 你也可以通过url定义Flex字体,然后就可以使用相对或绝对路径定义字体 

  1. viewplaincopytoclipboardprint?  
  2. <mx:Style> 
  3. @font-face  
  4. {  
  5. src:url("assets/tahoma.ttf");  
  6. fontFamily:localFont;  
  7. fontWeight:bold;  
  8. }  
  9. </mx:Style> 
  10. <mx:ButtonfontFamilymx:ButtonfontFamily="localFont"label="TryMe"/> 
  11. <mx:Style> 
  12. @font-face  
  13. {  
  14. src:url("assets/tahoma.ttf");  
  15. fontFamily:localFont;  
  16. fontWeight:bold;  
  17. }  
  18. </mx:Style> 
  19. <mx:ButtonfontFamilymx:ButtonfontFamily="localFont"label="TryMe"/> 
  20.  

 @font-face所有属性如下

  1. src:url("assets/aaa.png")字体url  
  2.  
  3. src:local("Tahoma");本地字体  
  4. fontFamily:localFont;字体别名  
  5.  
  6. fontStyle:italic;字体倾斜  
  7. fontWeight:bold;字体的粗细默认为normal  
  8.  
  9. advancedAntiAliasing:true字体防锯齿  
  10.  

 ◆最后讲下在css中使用Flex字体

  1. viewplaincopytoclipboardprint?  
  2. <mx:Style> 
  3. @font-face  
  4. {  
  5. src:url("assets/Abduction.ttf");  
  6. fontWeight:normal;  
  7. fontFamily:localFont;  
  8. }  
  9. .coolStyle  
  10. {  
  11. fontFamily:localFont;  
  12. fontWeight:normal;  
  13. }  
  14. </mx:Style> 
  15. <mx:ButtonstyleNamemx:ButtonstyleName="coolStyle"label="TryMe"/> 
  16. <mx:Style> 
  17. @font-face  
  18. {  
  19. src:url("assets/Abduction.ttf");  
  20. fontWeight:normal;  
  21. fontFamily:localFont;  
  22. }  
  23. .coolStyle  
  24. {  
  25. fontFamily:localFont;  
  26. fontWeight:normal;  
  27. }  
  28. </mx:Style> 
  29. <mx:ButtonstyleNamemx:ButtonstyleName="coolStyle"label="TryMe"/> 
  30.  

 

【编辑推荐】

  1. 技术分享 在Flex中嵌入Flex字体的步骤
  2. FlexBuilder4十大新特性闪亮登场
  3. 学习总结 在Flex中如何嵌入Flex字体
  4. 揭开Flex正则表达式的神秘面纱
  5. FlexBuilder开发方法及特点解析 

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-02 09:43:00

Flex应用

2010-08-13 10:01:46

Flex样式定义

2010-08-11 13:28:46

Flex行为

2010-08-05 13:14:16

Flex布局

2010-07-29 10:40:12

2010-08-13 11:02:27

Flex渲染器

2010-08-09 15:41:13

Flex字体

2010-08-10 14:08:09

Flex嵌入字体

2010-08-09 15:30:00

Flex字体

2010-08-10 11:08:32

Flex外部样式表

2010-08-09 16:01:37

Flex字体

2010-08-03 10:46:41

Flex代码格式化

2010-08-06 14:13:31

FlexDataGrid分页控

2010-08-13 09:54:23

Flex字体

2010-08-11 09:21:37

2010-07-30 16:17:18

Flex开发

2010-07-28 11:12:19

Flex正则表达式

2010-07-30 09:16:24

Flex数据绑定

2010-08-13 14:19:44

Flex绑定机制

2010-08-04 14:34:35

Flex编程模型
点赞
收藏

51CTO技术栈公众号