如何设计在任何分辨率下看起来都不错的字体的Metro UI? [英] How to design Metro UIs with fonts that look good on any resolution?
问题描述
当人们查看字体指南，我们看到以磅为单位指定了字体.一个点是1/72英寸，所以这是一个绝对的度量:10个点的字符应在任何分辨率和任何监视器上以完全相同的绝对大小显示.这对我来说很有意义，因为我希望能够以相同的大小在平板电脑上的10英寸或显示器上的23上读取文本.换句话说，我希望我的文字在平板电脑上可读，但我不想在显示器上太大.
When one looks at the Guidelines for fonts, we see that fonts are specified in points. A point is 1/72 of an inch so it is an absolute measure: a 10 points character should show at the exact same absolute size on any monitor at any resolution. That would make sense to me as I want to be able to read text -at the same size- whether on a 10 in tablet or a 23 in monitor. In other words, I want my text to be readable on a tablet, but I do not want it to be too big on a monitor.
On the other hand, I can understand that some UI elements could be specified in pixels, as in the Page layout guidelines.
但是，在XAML中，字体大小以像素为单位指定，这取决于设备(据我了解).因此，在高分辨率的监视器上，字体大小看起来很小！参见此帖子更多细节.该帖子中的答案是这样，您将获得一致的字体大小".当分辨率改变时，我看不到如何获得一致的尺寸?！?
However, in XAML font size is specified in pixels which is device dependent (to my understanding). Hence the fonts size will look tiny on a monitor with a higher resolution! See this post for more details. The answer in that post says "this way, you are getting a consistent font size". I can't see how I am getting a consistent size when it changes when the resolution changes?!?
是否应根据设备的分辨率以编程方式加载不同的字体大小? 我在此处中看到Windows会进行一些缩放调整，具体取决于在DPI上.这种调整是否足以让我的用户在平板电脑和20英寸显示器上拥有出色的使用体验(或者我应该根据设备分辨率以编程方式更改字体大小)?
Should I load different font size programmatically depending on the resolution of the device? I see here that Windows does some scaling adjustment depending on the DPI. Will this adjustment be enough for my users to have a great experience on a tablet and on, say, a 20 inch monitor (or should I programmatically change the font size depending on the device resolution)?
奖金问题:为什么当软件工具不使用磅(例如，他们在想什么)时，字体指南是使用磅编写的?
Bonus question: WHY are the Font Guidelines written using points when the software tools do not use points (like, what were they thinking)?
推荐答案
You'll also see described how scaling for pixel density is automatic:
对于那些购买这些像素密度更高的屏幕的用户，我们希望确保他们的应用程序，文本和图像在这些设备上看起来既美观又可用.早期，我们探索了连续缩放到像素密度的方法，以保持对象的大小(以英寸为单位)，但是我们发现大多数应用程序都使用位图图像，当位图图像放大或缩小到无法预测的尺寸时，位图图像看起来会变得模糊.相反，Windows 8使用可预测的比例百分比来确保Windows在这些设备上看起来不错. Windows 8中有三个比例百分比:
For those who buy these higher pixel-density screens, we want to ensure that their apps, text, and images will look both beautiful and usable on these devices. Early on, we explored continuous scaling to the pixel density, which would maintain the size of an object in inches, but we found that most apps use bitmap images, which could look blurry when scaled up or down to an unpredictable size. Instead, Windows 8 uses predictable scale percentages to ensure that Windows will look great on these devices. There are three scale percentages in Windows 8:
100% when no scaling is applied
140% for HD tablets
180% for quad-XGA tablets
针对生态系统中的实际设备优化了百分比. 140％和180％似乎是奇数比例百分比的选择，但是当您考虑这在实际硬件上如何工作时，它们才有意义.
The percentages are optimized for real devices in the ecosystem. 140% and 180% may seem like odd scale percentage choices, but they make sense when you think about how this will work on real hardware.
例如，针对1920x1080 HD平板电脑优化了140％比例，其具有1366x768基线平板电脑分辨率的140％.这些优化的比例因子可在基准数位板和高清数位板之间保持一致的布局，因为两个设备上的有效分辨率相同.选择每个比例百分比都是为了确保为100％1366x768平板电脑设计的布局具有相同的物理尺寸，并且在140％HD平板电脑或180％Quad-XGA平板电脑上具有相同的布局.
For example, the 140% scale is optimized for 1920x1080 HD tablets, which has 140% of the baseline tablet resolution of 1366x768. These optimized scale factors maintain consistent layouts between the baseline tablet and the HD tablet, because the effective resolution is the same on the two devices. Each scale percentage was chosen to ensure that a layout that was designed for 100% 1366x768 tablets has content that is the same physical size and the same layout on 140% HD tablets or 180% quad-XGA tablets.
这篇关于如何设计在任何分辨率下看起来都不错的字体的Metro UI?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
