1Pixel的字到底有多高？

时间  2019-11-06
标签 1pixel pixel 到底 多高 繁體版
原文   原文链接

在还原UI的时候咱们常会发现一个问题，按照Sketch标注的尺寸去还原设计稿中的文字会产生几个Px的偏差，字符上下有些许空白，以至于后期设计审查时频繁微调。css

font
如上图为 Android设备上 100Px的不一样字体显示的真实高度（ includeFontPadding:false，下同），不一样的字体的实际高度均不一致。

因此，为了精确还原咱们须要了解1Px的字体到底有多高？html

FontMetrics

在TrueType字体文件中，每一款字体文件都会定义一个em-square，它被存放于ttf文件中的'head'表中，一个em-square值能够为1000、1024或者2048等。 前端

em

em-square至关于字体的一个基本容器，也是textSize缩放的相对单位。金属时代一个字符不能超过其所在的容器，可是在数字时代却没有这个限制，一个字符能够扩展到em-square以外，这也是设计一些字体时候挺方便的作法。java

后续的ascent、descent以及lineGap等值都是相对于em-square的相对值。android

asecent

ascent表明单个字符最高处至baseLine的推荐距离，descent表明单个字符最低处至baseLine的推荐距离。字符的高度通常由ascent和descent共同决定，对于em-square、ascent与descent咱们能够经过FontTools解析字体文件得到。git

FontTools

FootTools是一个完善易用的Python字体解析库，能够很方便地将TTX、TTF等文件转成文本编辑器打开的XML描述文件。github

FontTools
复制代码

安装bash

pip install fonttools
复制代码

转码app

ttx Songti.ttf 
复制代码

转码后会在当前目录生成一个Songti.ttx的文件，咱们用文本编辑器打开并搜索'head'。编辑器

<head>
    <!-- Most of this table will be recalculated by the compiler -->
    <tableVersion value="1.0"/>
    <fontRevision value="1.0"/>
    <checkSumAdjustment value="0x7550297b"/>
    <magicNumber value="0x5f0f3cf5"/>
    <flags value="00000000 00001011"/>
    <unitsPerEm value="1000"/>
    <created value="Thu Nov 11 14:47:27 1999"/>
    <modified value="Tue Nov 14 03:02:03 2017"/>
    <xMin value="-99"/>
    <yMin value="-150"/>
    <xMax value="1032"/>
    <yMax value="860"/>
    <macStyle value="00000000 00000000"/>
    <lowestRecPPEM value="12"/>
    <fontDirectionHint value="1"/>
    <indexToLocFormat value="1"/>
    <glyphDataFormat value="0"/>
  </head>
复制代码

其中unitsPerEm便表明em-square，值为1000。 在Windows系统中，Ascent与Descent由'OS_2'表中的usWinAscent与usWinDescent决定。 可是在MacOS、iOS以及Android中，Ascent与Descent由'hhea'表中的ascent与descent决定。

<hhea>
    <tableVersion value="0x00010000"/>
    <ascent value="1060"/>
    <descent value="-340"/>
    <lineGap value="0"/>
    <advanceWidthMax value="1000"/>
    <minLeftSideBearing value="-99"/>
    <minRightSideBearing value="-50"/>
    <xMaxExtent value="1032"/>
    <caretSlopeRise value="1"/>
    <caretSlopeRun value="0"/>
    <caretOffset value="0"/>
    <reserved0 value="0"/>
    <reserved1 value="0"/>
    <reserved2 value="0"/>
    <reserved3 value="0"/>
    <metricDataFormat value="0"/>
    <numberOfHMetrics value="1236"/>
  </hhea>
复制代码

Ascent与Descent的值为以baseLine做为原点的坐标，根据这三个值，咱们能够计算出字体的高度。

TextHeight = (Ascent - Descent) / EM-Square * TextSize
LineHeight = (Ascent - Descent + LineGap) / EM-Square * TextSize
复制代码

上表中，咱们已知宋体-常规的ascent为1060，descent为-340。

TextSize为100Pixcel的宋体常规字符高度为
height = (1060 - (-340)) / 1000 * 100 = 140px
复制代码

因此对于宋体，1Px的字高为1.4Px。

常见字体LineGap通常均为0，因此通常lineHeight = textHeight。

经常使用字体参数

iOS默认字体 - [San Francisco]

<unitsPerEm value="2048"/>
  <ascent value="1950"/>
  <descent value="-494"/>
  <lineGap value="0"/>
复制代码
TextHeight = 1.193359375 TextSize
复制代码

Android默认字体 - [Roboto - Regular]

<unitsPerEm value="2048"/>
  <ascent value="1900"/>
  <descent value="-500"/>
  <lineGap value="0"/>
  <yMax value="2163"/>
  <yMin value="-555"/>
复制代码
TextHeight = 1.17187502 TextSize
复制代码

UI适配误区

如上图 Sketch设计稿中，字体为 28px，字体居上下边框为 32px，若是按照这样的参数进行UI还原的话，以 Android默认设备为例，外围背景会比原来高 28 * (1.17 - 1) = 4.76个像素( Android IncludeFontPadding = false)。

这是由于该设计稿中框选的lineHeight = textSize，这在通常的字体中是不正确的！会致使一些文字显示不下或者两行文字的上下端部分叠加。同理，用字的高度去得出TextSize也是不正确的！框选文字的时候不能刚刚够框选中文，实际上这种作法输入框输入个'j'便会超出选框，虽然仍能显示。

正确作法应该将lineHeight设置为 28 * 1.17 = 33，而后再测出上下边距。

如图，文字的实际位置并无变化，可是文字的 lineHeight变大了，上下边距相应减小为 29px与 30px。

对于设计稿中LineHeight > 字体实际高度（如1.17 * textSize）的状况下，咱们能够设置lineSpace = lineHeight - 1.17 textSize 去精确还原行间距。

结论：UI中字体还原不到位通常是对字体高度理解有误解，实际上1Px的字体在客户端中通常不等于1Px，而等于1.19（iOS） or 1.17 (Android) 个Px。

Android IncludeFontPadding

/**
     * Set whether the TextView includes extra top and bottom padding to make
     * room for accents that go above the normal ascent and descent.
     * The default is true.
     *
     * @see #getIncludeFontPadding()
     *
     * @attr ref android.R.styleable#TextView_includeFontPadding
     */
    public void setIncludeFontPadding(boolean includepad) {
        if (mIncludePad != includepad) {
            mIncludePad = includepad;

            if (mLayout != null) {
                nullLayouts();
                requestLayout();
                invalidate();
            }
        }
    }
复制代码

Android TextView 默认IncludeFontPadding为开启状态，会在每一行字的上下方留出更多的空间。

if (getIncludeFontPadding()) {
            fontMetricsTop = fontMetrics.top;
        } else {
            fontMetricsTop = fontMetrics.ascent;
        }
        
        
 if (getIncludeFontPadding()) {
            fontMetricsBottom = fontMetrics.bottom;
        } else {
            fontMetricsBottom = fontMetrics.descent;
        }
复制代码

咱们经过Textview的源码能够发现，只有IncludeFontPadding = false的状况下，textHeight计算方式才与iOS端与前端相统一。默认true状况会选取top与bottom，这两个值在通常状况下会大于ascent和descent，但也不是绝对的，在一些字体中会小于ascent和descent。

public static class FontMetrics {
        /**
         * The maximum distance above the baseline for the tallest glyph in
         * the font at a given text size.
         */
        public float   top;
        /**
         * The recommended distance above the baseline for singled spaced text.
         */
        public float   ascent;
        /**
         * The recommended distance below the baseline for singled spaced text.
         */
        public float   descent;
        /**
         * The maximum distance below the baseline for the lowest glyph in
         * the font at a given text size.
         */
        public float   bottom;
        /**
         * The recommended additional space to add between lines of text.
         */
        public float   leading;
    }
复制代码

对于top和bottom，这两个值在 ttc/ttf 字体中并无同名的属性，应该是Android独有的名称。咱们能够寻找获取FontMetrics的方法（getFontMetrics）进行溯源。

public float getFontMetrics(FontMetrics metrics) {
        return nGetFontMetrics(mNativePaint, metrics);
    }
    
    @FastNative
    private static native float nGetFontMetrics(long paintPtr, FontMetrics metrics);
复制代码

Paint的getFontMetrics最终调用了native方法nGetFontMetrics，nGetFontMetrics的实如今Android源码中的Paint_Delegate.java类

@LayoutlibDelegate
 /*package*/
static float nGetFontMetrics ( long nativePaint, long nativeTypeface,FontMetrics metrics){
            // get the delegate
            Paint_Delegate delegate = sManager.getDelegate(nativePaint);
            if (delegate == null) {
                return 0;
            }
            return delegate.getFontMetrics(metrics);
}
        
        
private float getFontMetrics (FontMetrics metrics){
            if (mFonts.size() > 0) {
                java.awt.FontMetrics javaMetrics = mFonts.get(0).mMetrics;
                if (metrics != null) {
                    // Android expects negative ascent so we invert the value from Java.
                    metrics.top = -javaMetrics.getMaxAscent();
                    metrics.ascent = -javaMetrics.getAscent();
                    metrics.descent = javaMetrics.getDescent();
                    metrics.bottom = javaMetrics.getMaxDescent();
                    metrics.leading = javaMetrics.getLeading();
                }

                return javaMetrics.getHeight();
            }

            return 0;
        }

复制代码

由上可知top和bottom实际上取得是Java FontMetrics中的MaxAscent与MaxDescent，对于MaxAscent的取值OpenJDK官网论坛给出了答案:

Ideally JDK 1.2 should have used the OS/2 table value for usWinAscent,
or perhaps sTypoAscender (so there's at least three choices here, see http://www.microsoft.com/typography/otspec/recom.htm#tad for more info). For max ascent we could use the yMax field in the font header. In most fonts I think this is equivalent to the value we retrieve from the hhea table, hence the observation that both methods return the max ascent. 复制代码

因此咱们能够获知，Android默认取的是字体的yMax高度，经过查找Apple Font手册咱们能够知道yMax是字符的边界框范围，因此咱们能够得出如下公式：

includeFontPadding default true
TextHeight = (yMax - yMin) / EM-Square * TextSize

includeFontPadding false
TextHeight = (ascent - descent) / EM-Square * TextSize
复制代码

Android默认字体roboto在默认includeFontPadding = true状况下，textHeight = 1.32714844 textSize。

因此Android UI适配，若是不改变includeFontPadding，能够将系数调整为1.327

总结

相同textSize的字体，高度由字体自己决定

字体公式

TextHeight = (Ascent - Descent) / EM-Square * TextSize
LineHeight = (Ascent - Descent + LineGap) / EM-Square * TextSize

Android - includeFontPadding true
TextHeight = (yMax - yMin) / EM-Square * TextSize
复制代码

客户端默认字体下，1个Px的高度值并不为1Px

iOS TextHeight = 1.193359375 TextSize 
Android - IncludePadding : true  TextHeight = 1.32714844 TextSize
Android - IncludePadding : false TextHeight = 1.17187502 TextSize
复制代码

参考资料

Apple - TrueTypeReference Manual

Microsoft - TrueType

Github - FontTools

Open JDK

AndroidXRef

Deep dive CSS: font metrics, line-height and vertical-align

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程