实例解析Flex字体的使用-vue使用苹方字体

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

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

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

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

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

Flex字体的使用

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

viewplaincopytoclipboardprint?  
<mx:Style> 
@font-face  
{  
src:local("Tahoma");  
fontFamily:localFont;  
fontWeight:bold;  
}  
</mx:Style> 
<mx:ButtonfontFamilymx:ButtonfontFamily="localFont"label="TryMe"/> 
<mx:Style> 
@font-face  
{  
src:local("Tahoma");  
fontFamily:localFont;  
fontWeight:bold;  
}  
</mx:Style> 
<mx:ButtonfontFamilymx:ButtonfontFamily="localFont"label="TryMe"/>

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

viewplaincopytoclipboardprint?  
<mx:Style> 
@font-face  
{  
src:url("assets/tahoma.ttf");  
fontFamily:localFont;  
fontWeight:bold;  
}  
</mx:Style> 
<mx:ButtonfontFamilymx:ButtonfontFamily="localFont"label="TryMe"/> 
<mx:Style> 
@font-face  
{  
src:url("assets/tahoma.ttf");  
fontFamily:localFont;  
fontWeight:bold;  
}  
</mx:Style> 
<mx:ButtonfontFamilymx:ButtonfontFamily="localFont"label="TryMe"/>

@font-face所有属性如下

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

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

viewplaincopytoclipboardprint?  
<mx:Style> 
@font-face  
{  
src:url("assets/Abduction.ttf");  
fontWeight:normal;  
fontFamily:localFont;  
}  
.coolStyle  
{  
fontFamily:localFont;  
fontWeight:normal;  
}  
</mx:Style> 
<mx:ButtonstyleNamemx:ButtonstyleName="coolStyle"label="TryMe"/> 
<mx:Style> 
@font-face  
{  
src:url("assets/Abduction.ttf");  
fontWeight:normal;  
fontFamily:localFont;  
}  
.coolStyle  
{  
fontFamily:localFont;  
fontWeight:normal;  
}  
</mx:Style> 
<mx:ButtonstyleNamemx:ButtonstyleName="coolStyle"label="TryMe"/>

【编辑推荐】