Silverlight 1.0 中文字显示解决方案

2007-11-01 15:12:47  来源:msdn中国 奚江华

WebjxCom提示:虽然 Silverlight 本身具备极为优越的 2D 向量文字、绘图与影音能力,但是若缺乏中文字显示的支援能力,对亚洲国家的使用者、程式设计人员乃至于企业端都会造成很大的困扰,故本文将针对如何让 Silverlight 可以正确 显示中文字型 而提供数种解决方案,然而这几种中文

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

Silverlight 1.0 中文字显示解决方案_网页教学网webjx.com转载 

  图 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 程式,执行结果如下图。

Silverlight 1.0 中文字显示解决方案_网页教学网webjx.com转载 

图 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>

更多