Silverlight 1.0 中文字显示解决方案

也许冰雪聪明的各位会想到，如果完整的 TTF 档过大，那是否有可能擷取应用程式所需的部分字型，然后製作一个较小的字型档，以便字型档下载时可以较为迅速，如此不就解决了!?答案正是如此，是真的有方法可以只擷取所需的字型，再加以製作成一个 .odttf 档，而依字型的种类不同，最终档案的大小可能是几百 KB～1000KB，至少比起动輒 5MB 或 10MB 以上的 TTF 档案快多了，在 Internet 上传输也是一个可行的解决方案。在此笔者先製作出一个标楷体的部分字型档，其档案名称为“3F1838BE-604B-601D-DA75-B576DE686443.odttf”，而各位先只管如何使用这个部分字型档练习即可，后面会有独立小节解释 ODTTF 字型档及製作的详细步骤。

　　图 5　Glyphs 下载之完整型档

　　范例二　使用 Glyphs 显示部分嵌入字型档 ODTTF(部分嵌入字型档下载)

　　本范例将示范 Glyphs 如何使用部分嵌入字型档 ODTTF 来显示中文字型，步骤说明如下：

　　Step 1：製作部分嵌入字型档 ODTTF

　　首先製作名称为“3F1838BE-604B-601D-DA75-B576DE686443.odttf”的只含部分嵌入字型的档案，主要是希望缩小字型档的体积大小，让 Glyphs 可以迅速下载读取，在这请各位直接使用 ODTTF 当做练习，先不急着知道怎么製作。

　　Step 2：在 Glyphs 指定使用 ODTTF 字型档

　　请在 Glyphs 物件的 FontUri 属性指定 ODTTF 字型档所在的完整HTTP网路位置，Glyphs 就能够直接显示中文字型了，请参考 GlyphsODTTF.html 及 GlyphsODTTF.xaml 程式，以下为 GlyphsODTTF.xaml 程式码：

　　GlyphsTTF.xaml

以下是引用片段： <Canvas   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">     <Canvas >         <Glyphs Fill="Blue" UnicodeString="春花秋月何時了，"     FontUri="http://localhost/ChineseFont/Fonts/3F1838BE-604B-601D-             DA75-B576DE686443.odttf"           FontRenderingEmSize="30" Canvas.Top="0"/>         <Glyphs Fill="Blue" UnicodeString="往事知多少，"     FontUri="http://localhost/ChineseFont/Fonts/3F1838BE-604B-601D-             DA75-B576DE686443.odttf"           FontRenderingEmSize="30" Canvas.Top="40"/>         <Glyphs Fill="Red" UnicodeString="小樓昨夜又東風，"     FontUri="http://localhost/ChineseFont/Fonts/649C70ED-5A7E-7277-             6038-1A0DBB6BDF08.odttf"         FontRenderingEmSize="30" Canvas.Top="80"/>         <Glyphs Fill="Red" UnicodeString="故國不堪回首月明中"     FontUri="http://localhost/ChineseFont/Fonts/649C70ED-5A7E-7277-         6038-1A0DBB6BDF08.odttf"         FontRenderingEmSize="30" Canvas.Top="120"/>     </Canvas> </Canvas>

　　完成后请执行 GlyphsODTTF.html 程式，执行结果如下图。

图 6　Glyphs 显示部分字型档

　　TextBlock

　　Silverlight 1.0 的 TextBlock 物件，基本上只能直接显示英文字型，对于 Unicode 字型如中文字则会以小方框替代，不像 Glyphs 至少可以显示中文字型，顶多是字型档下载稍嫌大了点。而 TextBlock 不能直接显示中文的原因，是出在 Silverlight 本身没有内建中文字型，亦不能呼叫作业系统的中文字来使用，再加上 TextBlock 根本不能像 Glyphs 可指定网路上某个位置字型档的机制，故 TextBlock 要显示中文字会较 Glyphs 麻烦了点。然而要让 TextBlock 显示中文需要两个额外步骤：

　　使用 Downloader 物件下载中文字型。

　　在 TextBlock 的 setFontSource 方法设定字型档来源，以及字型档名称。

　　如此便可让 TextBlock 可以正常显示中文字，让我们来看以下的范例。

　　范例三　以 Downloader 下载完整 TTF 字型供 TextBlock 使用

　　本范例将示范如何透过 Downloader 物件从 Web 伺服器下载所需的完整 TTF 字型到使用者电脑端，如此 TextBlock 便有中文字型可供显示中文字，步骤说明如下：

　　Step 1：准备 TTF 中文字型

　　在此准备一个标楷体的中文字型档 Kaiu.ttf，以及另一个压缩档 Kaiu.zip，而压缩或未压缩的字型档都可以被 Downloader 下载给 TextBlock 使用，不过想当然尔是压缩过后的字型下载速度较快，也比较不佔用 Internet 频宽，例如 Kaiu.ttf 未压缩前是 5,015KB，压缩后是 2,825KB，档案大小约减少了 43%，下载字型档的速度当然也更快。

　　Step 2：建立 XAML 程式主体

　　请参考 TextBlockDownloaderTTF.xaml 的程式主体，以下为 XAML 程式码：

　　TextBlockDownloaderTTF.xaml

以下是引用片段： <Canvas xmlns="http://schemas.microsoft.com/client/2007"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Loaded="handleLoad">     <!-- 進度列指示器 -->     <Canvas x:Name="ProgressIndicator" Canvas.Left="10"          Canvas.Top="10" Canvas.ZIndex="1">         <Rectangle x:Name="progressRectangle"           Canvas.Left="10"           Height="10" Width="0"           Fill="Maroon" />         <Rectangle           Canvas.Top ="-1"           Canvas.Left="9" Height="12"           Width="202"           StrokeThickness="1" Stroke="Black" />         <TextBlock           x:Name="progressText"           Canvas.Top ="-4" Canvas.Left="230"           Text="0%" FontSize="12" />     </Canvas>          <Canvas Name="myCanvas" Background="LightBlue" Width="600"          Height="400" Canvas.Top="0"  Canvas.ZIndex="0" >         <TextBlock Name="myTextBlock"              TextWrapping="Wrap"  Width="300" FontSize="30"              Canvas.Top="80" Canvas.Left="100" >             千山鳥飛絕             萬徑人蹤滅             孤舟簑笠翁             獨釣寒江雪 </TextBlock>     </Canvas> </Canvas>