Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Элемент Glyphs в WinRT

120

Вместо элемента TextBlock также можно использовать элемент, который называется Glyphs. С ним труднее работать, чем с TextBlock, но он содержит средства определения расстояния между отдельными символами.

Второй столбец текста в программе PrivateFonts из предыдущей статьи выводится следующей разметкой:

<Page ... FontSize="36">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        ...

        <Grid Grid.Column="1">
            <Grid.Resources>
                <Style TargetType="Glyphs">
                    <Setter Property="FontRenderingEmSize" Value="36" />
                    <Setter Property="Fill" Value="Black" />
                    <Setter Property="OriginX" Value="0" />
                </Style>
            </Grid.Resources>
            

            <Glyphs UnicodeString="Miramonte"
                    FontUri="ms-appx:///Fonts/Miramo.ttf"
                    OriginY="135" />

            <Glyphs UnicodeString="Miramonte Bold"
                    FontUri="ms-appx:///Fonts/Miramob.ttf"
                    OriginY="180" />
            
            <Glyphs UnicodeString="Kootenay"
                    FontUri="ms-appx:///Fonts/Kooten.ttf"
                    OriginY="45" />

            <Glyphs UnicodeString="Lindsey"
                    FontUri="ms-appx:///Fonts/Linds.ttf"
                    OriginY="90" />

            <Glyphs UnicodeString="Pericles"
                    FontUri="ms-appx:///Fonts/Peric.ttf"
                    OriginY="225" />

            <Glyphs UnicodeString="Pericles Light"
                    FontUri="ms-appx:///Fonts/Pericl.ttf"
                    OriginY="270" />

            <Glyphs UnicodeString="Pescadero"
                    FontUri="ms-appx:///Fonts/Pesca.ttf"
                    OriginY="315" />

            <Glyphs UnicodeString="Pescadero Bold"
                    FontUri="ms-appx:///Fonts/Pescab.ttf"
                    OriginY="360" />

            <Glyphs UnicodeString="Pescadero Bold*"
                    FontUri="ms-appx:///Fonts/Pesca.ttf"
                    StyleSimulations="BoldSimulation"
                    OriginY="405" />

            <Glyphs UnicodeString="Pescadero Italic*"
                    FontUri="ms-appx:///Fonts/Pesca.ttf"
                    StyleSimulations="ItalicSimulation"
                    OriginY="450" />
        </Grid>

        
        ...
        
    </Grid>
</Page>

Вместо свойства Text в Glyphs определяется свойство UnicodeString. Также элементу необходимы еще три свойства: FontUri (как подсказывает имя) содержит URI-адрес файла шрифта; обратите внимание: в свойстве хранится только URI, указывать имя семейства шрифтов не нужно. Элемент Glyphs работает с файлом шрифта на низком уровне, он ничего не знает об именах семейств. Свойство FontRenderingEmSize является аналогом свойства FontSize, но не имеет значения по умолчанию. Также нет значения по умолчанию для свойства Fill.

Обратите внимание: два последних элемента содержат ссылку на нормальный шрифт Pescadero, но задают свойству StyleSimulations значения BoldSimulation и ItalicSimulation соответственно. Перечисление StyleSimulations также включает значение BoldItalicSimulation.

Свойства OriginX и OriginY обозначают местонахождение текста относительно родителя — или, точнее, относительно размещения элемента родителем. Родителем в данном случае является панель Grid с одной ячейкой, а не панель StackPanel, использованная для первого столбца. (Очень часто группы элементов Glyphs размещаются на Canvas.) Эти свойства задают положение левого края базовой линии, а не верха текста. Я просто задал первому свойству OriginY значение 45 и последовательно увеличивал значения на 45, что дает приблизительно правильный результат, как нетрудно убедиться визуальным сравнением первых двух столбцов в программе PrivateFonts.

Использование элемента Glyphs

В реальной программе для позиционирования элементов Glyphs следует использовать метрики шрифтов.

Если вам потребуется задать свойство FontUri в коде, просто создайте объект Uri и используйте ту же строку, которая приводилась в файле XAML:

glyphs.FontUri = new Uri("ms-appx:///Fonts/Linds.ttf");

Элемент Glyphs не обеспечивает автоматического переноса текста по строкам. Однако у него имеется свойство Indices, не использованное в моих примерах; оно позволяет задать дополнительные смещения для более точного позиционирования отдельных символов. Строка Indices также может использоваться для назначения лигатур — комбинаций, объединяющих две и более буквы в одном глифе.

Пройди тесты