嵌入字体

嵌入字体 - RIAMeeting翻译小组 - 王成
在这张图的下面，你能看到2个版本的XYZ公司的Logo.
这两个版本都是由一个球形图案加上文字"XYZ Company"组成的。
在屏幕左侧的文字是以设备默认字体显示的。
在屏幕右侧同样的文字是以一个embedded font(嵌入字体)
在这段视频里，您将学习如何在Flex应用程序中嵌入字体，通过使用ActionScript ，CSS(层叠样式表)和Flash CS3。
您也将学习如何限制嵌入字体的某些字符，以减少文件大小。
设备字体是在某一特定设备上可用的字体，如电脑或移动手持设备。
当您在Flex应用程序中使用一个设备字体时，这个字体在编译期间会被作为一个名称引用来存储。
在运行时，应用程序会尝试在用户的设备上寻找字体。
如果无法找到那个字体，它将做最好的推测，并选择一种它认为是最接近用户设备的字体。
开发者通常创建应用程序只使用有限的字体，这些字体是他们所知的在目标设备上一般都可用的。
例如，Times New Roman, Arial, Helvetica 和 Verdana字体常常用来做为网站的字体。因为它们在Windows和Mac系统上都可以使用。
因为设备字体不会被编译进Flex应用程序，他们不会增加最后部署的SWF文件的体积。
因此，您无法确定您的应用程序在用户的计算机上是否会如预期般的显示，因为不能保证用户的计算机上有这些字体。
我已经使用Canvas容器将先前的视频替换成了Logo图案。它只包含一个球形图案和由两个Label控件组成的“XYZ company”文本。
你可以通过Label的rotation属性来旋转文本，以确定它使用的是设备字体还是一个嵌入字体。
设备字体将会消失，而嵌入字体仍继续显示。
我为显示"Company"文本的Label控件添加一个rotation属性，并设值为45度。
我保存文件并运行它，这时你会看到“XYZ”文本仍显示在屏幕上，但“Company”文本没有显示。
同样，设备字体也不能在的Flex的动画和效果中正常工作。
如果你通过文件名或系统字体名嵌入字体，你只能嵌入TrueType字体(微软和Apple公司共同研制的字型标准)。
如果您选择使用Adobe Flash CS3去生成一个SWF文件，然后将它应用到你的Flex程序中，你就可以嵌入任何在Flash中可用的字体。
因为嵌入字体会被编译进你的应用程序中，需要知道使用它们会增加编译后的SWF文件体积。
然而，相反的，嵌入你的字体将保证你的应用程序会正确的在客户的电脑上显示。
嵌入字体也可用于Flex动画和自动反锯齿以提高可读性。
反锯齿可以平滑字体的字符以提高文字在某些大小情况下的可读性
有许多算法可以创造反锯齿文字，但最终的想法是利用字体阴影的颜色到字体颜色的平滑的曲线和角度。
这个图像显示了48号的Times New Roman文字，已经放大到500 ％ 。位于顶部的文字没有反锯齿，你可以清楚地看到锯齿边缘的线条。
位于底部的文字是反锯齿的 ，其与灰色阴影平滑的过渡。
这个图像显示了48和11号的Times New Roman文本，没有任何放大。
左边的文字不是反锯齿的。
右边的文字是反锯齿的。
你可以看到，在大字体方面，右侧边缘平滑的反锯齿文本更好一些。
而左侧带锯齿的小尺寸文本实际看起来更好。
文本阴影的颜色使反锯齿字体的曲线和边角平滑，也会造成小尺寸字符的不易读。请记住，但是，这并不一定适用于所有的字体。
在Flex嵌入字体中，你可以控制适用的反锯齿字体的数量，通过高级反锯齿设置。这个话题超出了该视频的范围，但可以去参考Flex ActionScript 参考手册。
反锯齿无法控制设备字体。
像所有的资产(知识产权)一样，字体也有许可证限制，你必须遵守。在这段视频里，我们使用的是公开的Justus字体，它是我们从dafont.com网站图片中找到的。
在早先的视频中，你已学会了如何使用Embed标签和source属性嵌入图像。我将使用相同的命令来嵌入字体。
首先，我将在application文件顶部创建一个MXML Script块。
我输入[Embed()]标签和它的source属性。
我可以使用相对或绝对路径来引用我电脑上的TrueType字体文件。
在这里，我引用Windows目录中的Justus Roman TrueType字体。
请注意，我在文件路经中使用的斜杠"/"，如果你使用反斜线() ，你需要将它们转义成双斜线(\) 。
我在[Embed()]标签里添加一个逗号，然后再添加mimeType属性以声明这是嵌入一个字体。
我输入“application/x-font” 。
我将把这个属性移到下一行以提高可读性。
我声明一个私有的变量，命名为LogoFont。
和嵌入的图片资源一样，我定义嵌入字体为一个ActionScript类命名为Class.
你不会真的直接引用这个变量，但这步是必须的。
它会被编译器用来联合嵌入字体和应用程序代码。
现在我需要为字体定义一个唯一的名称，这样我就可以在应用程序的样式中引用它。
我在[Embed()]标签中添加fontNam属性并任意设置一个值“fontJustusRoman”。
不要忘记用逗号来隔开属性。
我在“Company”的Label控件上添加fontFamily属性，并设置同样的值来引用嵌入字体。
我保存文件并运行它，你会看到字体已被嵌入，因为它尽管被旋转了，但仍显示在屏幕上。
我也可以在MXML的Style块中引用嵌入字体。
你可以在MXML Style块中为你的Flex应用程序定义CSS。您将在后面的视频中学到更多相关内容。
现在，我已经创建了MXML Style块，并添加一个自定义的类选择器，命名为 ".XYZLogoFont"。
在选择器的大括号之间，我定义fontFamily样式并设置它为嵌入字体fontJustusRoman。
请注意，我可以按下“Ctrl 空格”快捷键显示style提示。
我选择font-size并设置为22pt 。
最后，我设置color样式为白色。
我可以应用新的XYZLogoFont类选择器到我的组件上，通过使用MXML组件的styleName属性。
首先，我删除Label控件的color和fontSize属性。
我也要删除Company控件的fontFamily和rotation属性。
现在，我添加styleName属性并设值为XYZLogoFont 。
我保存文件并运行应用程序后，你会看到两个Logo的Label控件都应用了嵌入字体。
不过，我想在XYZ文本上使用粗体。
我在“XYZ”的Label控件上添加fontWeight属性并设值为bold。
我还在Label控件上添加了rotation属性并设为45度，“Company”的Label控件同样也设置45度。
我保存并运行程序后，你会看到“XYZ ”文本消失了，但“Company”文本显示并旋转了。
这告诉我，粗体的justus字体不是嵌入的。
我找到[Embed()]标签并添加fontWeight属性设值为bold。
我保存并编译文件后，你会看到现在“XYZ”文本出现了，但“Company”文本没出现。
这告诉我，只有粗体的“justus”字体是嵌入的。
为了使用正常体和加粗体，我需要把它们两个都嵌入。
我复制一份[Embed()]标签的内容，这样我可以把第二个更新为粗体的。
我修改它的fontName属性为fontJustusBold，并修改source属性的值为Justus-Bold. ttf
我还需要给这个变量一个唯一的名字，所以我将它叫做LogoFontBold。
最后，我要从第一个嵌入字体中删除fontWeight属性。
我复制并粘贴".XYZLogoFont"类选择器，然后更改它的名称为“.XYZLogoFontBold”
我为新的类选择器添加font-weight属性，并修改fontFamily以引用fontJustusBold嵌入字体。
最后，我要更新“XYZ”Label控件去使用XYZLogoFontBold样式。
我保存并运行程序后，你会看到字体被嵌入了，因为文字都旋转了，而且"XYZ"是粗体的。
我将rotation属性从两个Label控件上删除。
当我保存文件并运行程序后，你会看到“XYZ Company”的logo应用了正确的嵌入字体。
你也可以通过系统字体名称嵌入字体，而不是它的TTF文件路径。
在Windows电脑上，你将需要安装Font Properties Extension来访问TTF文件的属性信息。
现在，你可以在windows资源管理器中右击TTF字体文件，并选择Properties项。
然后切换到Names标签页，你会看到Font Family名称，这里是Justus。
将这个作为系统字体名。
在Mac上，从Applications中打开Mac Font Book应用项。
选择字体，然后从菜单中选，Preview > Show Font Info
察看Family的信息，并使用它的值作为您的系统字体名。
在非粗体的嵌入字体[Embed()]标签中，我使用systemFont属性替换source属性，并设值为“Justus”。
我保存并运行应用程序后，你会看到“Company”文本仍然显示，但是小写字母被小号的字母代替了。
在Windows Font Properties Extension中，你可以看到Justus Roman字体有font family属性其值为Justus。
我在Justus Versalitas字体上右击，打开这个字体的Font Properties Extension。
你会看到它的font family也设置为Justus。
当我在这个字体的TTF文件上双击，你会看到在画面里这些字体都是小号的字母，而且这就是当我引用Justus字体时系统定义的字体。
如果你察看其它程序的字体下拉菜单，如Flash CS3的字处理，你会看到只有一个Justus字体的引用，不能选择Roman或者Versalitas
你可以使用字体制作软件设置TTF文件来修改字体集和其子集，但我只是简单的从我的系统里删除Justus Versalitas字体。
你有时会发现你的Flex应用程序没有反映出你期望的变化。
当我再次运行应用程序后，您会看到Justus Versalitas字体仍显示在屏幕上，即使它已经不存于我的电脑上了。
在我检查了代码，确定没有明显错误之后，我从Flex Builder的菜单中选择Project > Clean
你可以Clean某一个选定的项目，或者Clean所有项目。
在我按下OK之前，请注意我打开了项目的bin-debug目录，你能看到所有为这个项目输出的文件，包括编译后的SWF。
因为我只有一个打开的项目，所以我使用默认选项Clean所有项目并按下OK
请注意，当该过程结束后，所有的输出文件都被删除了。
当我再次运行程序，它们将被重新编译，以确保显示的不是旧的被缓存的文件。
你可以看到，完整的“Company”文本正确的显示出来。
我在前面提到，嵌入字体会增加编译后的SWF文件的大小。根据不同的字体，可能达到几万byte甚至数兆byte
你应该限制嵌入到你应用程序中的字符，在你嵌入字体时使用unicodeRange属性。
在Flex Builder安装目录中，在frameworks目录中我找到flash-unicode-table.xml文件
这是一个参考文件，它可以用来帮助你识别你想嵌入的语言或字符集的unicode值。
我要嵌入英文小写字符“a”到"z"。
在我的程序文件中，我在[Embed()]标签中添加unicodeRange属性，指明英文小写字符的范围从“U 0061”到“U 007A”，中间使用"-"连接。
同样，不要忘记用逗号分隔属性。
当我保存并运行程序后，你会看到大写字母"C"从显示的“Company”文本中消失了。
这是因为，我只是嵌入了字体的小写字符。
在网上稍微搜索一下，我找到了unicode.org网站，在这里我能确定大写字母C的unicode编码为0043。
我在unicodeRange属性中添加一个逗号，并添加大写字母C的unicode编码U 0043
当我保存并编译程序后，你能看到大写字母C显示出来了。
请记住，为显示XYZ 文本我们还嵌入了Justus Bold字体。
我也想限制这个字体的嵌入字符，所以我为[Embed()]标签添加unicodeRange属性。
在unicode.org网站察看一下，我就确定了X,Y,Z字母的unicode值分别为U 0058,U 0059 和 U 005A
保存文件后,我会继续测试并Clean该项目
当我运行该程序，你会看到"XYZ Company"文字正确显示了，但现在我已经把编译后的程序缩小了约40K,只是简单的明确我需要嵌入的字符。
嵌入字体时，你可以完全绕过ActionScript，只使用CSS 。
像ActionScript一样,你可以通过文件名或系统字体名来嵌入字体.
在这两种情况下,你可以用"@font-face"的CSS样式来定义嵌入的字体.
这两种方法都有src属性，以及fontFamily 属性。
但是,使用url()方法来引用TTF文件,使用local()方法来引用系统字体名.
你可以为fontFamily属性设置一个String值,在CSS样式中它将被用来引用字体.
我删除MXML脚本块，因为我们通过CSS嵌入字体,不再需要它 。
在MXML Style块里，我创建@font-face选择器，并添加src属性设其值为TTF文件路径。
请注意，我使用了url()方法，因为这是绝对路径。
我还要设置fontFamily属性为“fontJustusRoman”，以匹配“Company”的Label控件的类选择器中使用的fontFamily属性。
我还要用unicodeRange属性来嵌入小写字母和大写字母C。
我现在需要嵌入Justus粗体字。
我创建另一个@font-face选择器，但这次，我设置src属性并使用local()方法，设其参数值为“Justus”系统字体。
由于这是粗体的，我添加fontWeifht 属性并设置为bold。
和前面一样，我需要设置fontFamily属性为fontJustusBold，以匹配“XYZ”Label控件使用的类选择器。
这个嵌入字体的unicodeRange属性只引用XYZ大写字母。
当我保存文件并运行程序，你会看到使用CSS嵌入字体也能使公司的logo文本正常显示。
这是Flash CS3界面，你能用它来嵌入字体到一个编译后的SWF，然后把它嵌入到你的Flex程序中。
我选择创建一个新的Flash ActionScript3文件，但我也可以用ActionSctipt 2 。
我保存Flash源文件到我电脑上的任意位置，并命名它为“Justus.fla”
你可以随意给文件命名。这里使用字体名来命名是为了方便。
我从Flash工具箱中选择Text工具，并在Properties选项卡中选择Dynamic Text。
我还是选择“Justus”字体。
当使用这种技术时，你不必局限于TrueType字体。你可以嵌入任何一种在Flash CS3中可用的字体，包括PostScript和bitmap字体。
我在Stage上点击并输入描述信息。“Justus Company”是指Justus字体的“Company”文本。
实际上你写什么是任意的。这个动态文本字段只是简单的让你附加上你想嵌入的字体。
请注意，一般来说，这个字体大小不会影响应用在你的Flex程序中的字体大小。
但是，如果你嵌入一个bitmap字体，你会想按照它显示的大小嵌入它，因为这些被设计按确定的大小来显示。
请特别注意下拉框中的字体名。在你的Flex程序中，你将需要严格的参考它。
我确定我已经选中了动态文本域。
注意，如果我不想字体被反锯齿，我可以选择Bitmap(no anti-alias)项。
我会选择Anti-alias for readability项，然后点击Embed按钮。
我可以选择嵌入一个或多个种类的字符。
我将只选择小写字体。
我选择Control > Test Movie，编译完的SWF将被创建和预览。
请注意，“Justus”的“J”和“Company”的“C”都消失了，因为他们是大写字母，而我只嵌入了小写字母。
正如我前面提到的，在Stage上打的字符是任意的。
但是，他们能很好的检查是否嵌入了适当的字符。
再次确认，我选中了动态文本域。
现在，我点击“Embed”按钮，我会明确嵌入选择的字体，在文本框中直接输入“Company”，这将确保只有这些字符会被嵌入到SWF中。
当我测试swf时，我会看到只有“Company”显示出来。
你已经看到，测试影片将会编译SWF文件，但你也能使用File > Publish Settings或者File > Publish command来做。
我取消HTML选项，因为我只需要SWF文件。
当我点击Publish按钮，SWF将会生成在FLA原文件的相同目录中。
现在，我可以移动SWF到我的Flex Builder项目。
我已将Justus.swf文件移到我的Flex Builder项目的assets文件夹。
在MXML的Styles中，我更新第一个@font-face选择器，删除unicodeRange属性，引用相对路径的SWF文件。
当我保存文件后，你会看到出现一个编译错误，告诉我它不能在SWF文件中识别名字为fontJustusRoman的字体。
我前面提到，你必须严格的参考Flash字体下拉框中的字体。
在@font-face中，我修改fontFamily属性为Justus，同样也修改XYZLogoFont和XYZLogoFontBold选择器的fontFamily。
当我保存文件后，编译器的错误就消失了。
当我运行应用程序，你会看到非粗体的字体按预期的嵌入了。
但是，粗体字体有锯齿，这让我知道，它没有被正确的嵌入。
我将在Flash 文件中创建第二个动态文本框，来嵌入粗体的XYZ文本。
我选择Text工具，并确保选中了Dynamic Text和Anti-alias for readability项。
在Properties选项卡中，我点击Bold按钮。
在舞台上，我输入Justus Bold XYZ文本，并点击Embed按钮来嵌入XYZ文本。
当我测试影片，你会看到只有XYZ文本显示。
我修改第二个@font-face选择器，删除unicodeRange，引用SWF文件，修改fontFamily为Justus。
当我保存文件并运行程序后，你会看到普通的和粗体的文字都如预期般的显示。