Windows 应用商店通用应用中的字体大小缩放 (W8.1 + WP8.1) [英] font size scaling in Windows Store Universal App (W8.1 + WP8.1)

问题描述

如何在 Windows 应用商店通用应用 (W8.1 + WP8.1) 中缩放文本?基本上，无论使用哪种设备/分辨率，应用程序看起来都应该相同.目前的情况是布局(基于动态网格的布局)和图像除文本(字体大小)外都可以很好地缩放.

How do i scale text in Windows Store Universal App (W8.1 + WP8.1)? Basically, the app should look the same regardless which device/resolution is used. The current situation is that layout (dynamic grid based layout) and images scale well except of the text (font size).

显示的文字在 WVGA 分辨率(480 × 800)下看起来不错，但在 1080p 分辨率下却小得令人难以置信.

The text displayed looks nice for WVGA resolution (480 × 800) but is incredible small for 1080p resolution.

我已经读了很多东西，比如像素密度缩放指南或支持多种屏幕尺寸的指南

I already read a lot of stuff like Guidelines for scaling to pixel density or Guidelines for supporting multiple screen sizes

但我仍然不知道如何缩放文本以保持可读性，而不管显示分辨率/DPI.

But i still don't know how to scale text to stay readable regardless of display resolution/DPI.

当然我可以写一个使用 DisplayInformation.ResolutionScale 属性将字体大小转换为合适的值.

Of course i could write a class which uses the DisplayInformation.ResolutionScale property to convert the font size to an appropriated value.

示例:

• 在 WVGA 上使用 ScaleFactor 1x 的 FontSize 16 等于 FontSize 16
• 在 WXGA 上使用 ScaleFactor 1.6x 的 FontSize 16 等于 FontSize 25,6
• FontSize 16 on 720p with ScaleFactor 1.5x 等于 FontSize 24
• 1080p 的 FontSize 16 和 ScaleFactor 2.25x 等于 FontSize 36

但我不确定这是否适用于所有场景.有没有更好的方法来做到这一点?我认为这种常见的任务可以通过一些内置功能来执行.

But I'm uncertain if this will work for all scenarios. Is there a better way to do so? I thought such a common task could be performed with some build in functionality.

免责声明:这(希望)不是让我为你搜索这个问题"我发现了大量关于缩放的页面，但它们都涵盖了布局或图像.但我找不到任何关于字体大小缩放的信息.如有遗漏请见谅.

Disclaimer: this is (hopefully) not a "let me google this for you question" I found tons of pages which are about scaling but they all cover the layout or images. But I couldn't find anything about font size scaling. Please forgive me if I missed something.

<小时> 恐怕我没能把问题表达清楚:(左边是WVGA，右边是1080p)

---

I'm afraid, i failed to express the problem clearly: (WVGA on the left, 1080p on the right)

推荐答案

我为我的 Windows Store 应用程序所做的是将 FontSize 属性绑定到页面高度并转换该值(你必须玩一点，直到您会为您的案例找到正确的价值).

What I did for my Windows Store app was to bind the FontSize property to the page height and convert the value (you'd have to play a bit, until you find the right value for your case).

<TextBlock Grid.Row="0" Text="Some Text" 
FontSize="{Binding ElementName=pageRoot, Path=ActualHeight, 
Converter={StaticResource PageHeightConverter}, ConverterParameter='BodyFontSize'}" />

这是我的转换器类

    class PageHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        switch ((string)parameter)
        {
            case "HeroImage":
                return ((((double)value) * 2) / 3);
            case "TitleFontSize":
                return (int)((double)value / 40);
            case "BodyFontSize":
                return (int)((double)value / 60);
            default:
                return 0;
        }
    }
}

它并不完美，但在我找到更好的解决方案之前效果很好.

It's not perfect, but works pretty well until I find a perttier solution.

这篇关于Windows 应用商店通用应用中的字体大小缩放 (W8.1 + WP8.1)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！