ios 自定义安装的字体未在 UILabel 中正确显示

Custom installed font not displayed correctly in UILabel

提问by MikeQ

I'm trying to use a Helvetica Neue Condensedfont which I got from the Adobe Font Collection Pro Package. Unfortunately, it seems to draw incorrectly when I use it within a UILabel.

我正在尝试使用从 Adob​​e Font Collection Pro Package 获得的Helvetica Neue Condensed字体。不幸的是，当我在UILabel.

The line height seems to be calculated correctly (I think), but when the font is displayed, it is aligned to the very top of the bounding box. I called [myLabel sizeToFit]and only adjusted the width to produce this screen capture:

行高似乎计算正确（我认为），但是当显示字体时，它与边界框的最顶部对齐。我调用[myLabel sizeToFit]并仅调整宽度以生成此屏幕截图：

I had the same problem with both the bold and regular version of the font. I was able to pull a version of Helvetica Neue Boldfrom OSX and put it on my device and it displays fine (green background in above picture).

我对字体的粗体和常规版本都有同样的问题。我能够从 OSX 中提取一个Helvetica Neue Bold版本并将其放在我的设备上，它显示正常（上图中的绿色背景）。

What could be wrong with the either the font file or my code that would cause it to draw this way?

字体文件或我的代码有什么问题会导致它以这种方式绘制？

回答by kolyuchiy

I posted a solution that involves patching ttf font file here:

我在这里发布了一个涉及修补 ttf 字体文件的解决方案：

Here's the solution that worked for my custom font which had the same issue in UILabel, UIButton and such. The problem with the font turned out to be the fact that its ascender property was too small compared to the value of system fonts. Ascender is a vertical whitespace above font's characters. To fix your font you will have to download Apple Font Tool Suitecommand line utilities. Then take your font and do the following:

这是适用于我的自定义字体的解决方案，它在 UILabel、UIButton 等中存在相同的问题。结果证明，字体的问题在于，与系统字体的值相比，它的 Ascender 属性太小了。Ascender 是字体字符上方的垂直空白。要修复您的字体，您必须下载Apple Font Tool Suite命令行实用程序。然后使用您的字体并执行以下操作：

~$ ftxdumperfuser -t hhea -A d Bold.ttf

This will create Bold.hhea.xml. Open it with a text editor and increase the value of ascenderattribute. You will have to experiment a little to find out the exact value that works best for you. In my case I changed it from 750 to 1200. Then run the utility again with the following command line to merge your changes back into the ttf file:

这将创建Bold.hhea.xml. 用文本编辑器打开它并增加ascender属性的值。您将不得不进行一些试验，以找出最适合您的确切值。就我而言，我将其从 750 更改为 1200。然后使用以下命令行再次运行该实用程序以将更改合并回 ttf 文件：

~$ ftxdumperfuser -t hhea -A f Bold.ttf

Then just use the resulting ttf font in your app.

然后只需在您的应用程序中使用生成的 ttf 字体。

回答by Joseph Lin

So this is a modified version of kolyuchiy'sanswer.

所以这是kolyuchiy答案的修改版本。

I opened my font with Glyphs, and then exported it without modifying anything. Somehow, magically, the vertical alignment issue was gone!

我用Glyphs打开了我的字体，然后没有修改任何东西就导出了它。不知何故，神奇的是，垂直对齐问题消失了！

What's better is that the new font plays nicely with methods like sizeWithFont:, so it doesn't have the issues mentioned by Joshua.

更好的是新字体可以很好地与 类似的方法配合使用sizeWithFont:，因此它没有Joshua提到的问题。

I took a look at the HHEA table with the command kolyuchiy mentioned, and noticed that Glyphs modified not just the ascender, but also lineGapand numberOfHMetricsfor me.

我接过一看HHEA表kolyuchiy提到的命令，并注意到字形修饰不只是ascender，也lineGap和numberOfHMetrics我。

Here's the raw data, before:

这是之前的原始数据：

versionMajor="1"
versionMinor="0"
ascender="780"
descender="-220"
lineGap="200"
advanceWidthMax="1371"
minLeftSideBearing="-73"
minRightSideBearing="-52"
xMaxExtent="1343"
caretSlopeRise="1"
caretSlopeRun="0"
caretOffset="0"
metricDataFormat="0"
numberOfHMetrics="751"

and after:

之后：

versionMajor="1"
versionMinor="0"
ascender="980"
descender="-220"
lineGap="0"
advanceWidthMax="1371"
minLeftSideBearing="-73"
minRightSideBearing="-52"
xMaxExtent="1343"
caretSlopeRise="1"
caretSlopeRun="0"
caretOffset="0"
metricDataFormat="0"
numberOfHMetrics="748"

So the moral of the story- don't just increase the ascender, but modify other related values as well.

所以故事的寓意——不要只是增加上升者，还要修改其他相关的价值。

I'm no typography expert so I can't really explain the why and how. If anyone can provide a better explanation it'd be greatly appreciated! :)

我不是排版专家，所以我无法真正解释原因和方式。如果有人能提供更好的解释，将不胜感激！:)

回答by phatmann

iOS 6 honors the font's lineGap property, while iOS 7 ignores it. So only custom fonts with a line gap of 0 will work correctly across both operating systems.

iOS 6 尊重字体的 lineGap 属性，而 iOS 7 忽略它。因此，只有行距为 0 的自定义字体才能在两个操作系统上正常工作。

The solution is to make the lineGap 0 and make the ascender correspondingly larger. Per the answerabove, one solution is to import and export from Glyphs. However, note that a future version of the app might fix this "bug".

解决方法是将lineGap设为0，并相应地将上升部分变大。根据上面的答案，一种解决方案是从 Glyphs 导入和导出。但是，请注意，该应用程序的未来版本可能会修复此“错误”。

A more robust solution is to edit the font yourself, per this post. Specifically,

根据这篇文章，更强大的解决方案是自己编辑字体。具体来说，

1. Install OS X Font Tools.
2. Dump the font metrics to a file: ftxdumperfuser -t hhea -A d YOUR_FONT.ttf
3. Open the dumped file in an editor.
4. Edit the ascenderproperty by adding the value of the lineGapproperty to it. For example, if the lineGapis 200 and the ascenderis 750, make the ascender950.
5. Set the lineGapto 0.
6. Merge the changes into the font: ftxdumperfuser -t hhea -A f YOUR_FONT.ttf

1. 安装 OS X 字体工具。
2. 将字体指标转储到文件中： ftxdumperfuser -t hhea -A d YOUR_FONT.ttf
3. 在编辑器中打开转储的文件。
4. ascender通过lineGap向其添加属性值来编辑该属性。例如，如果lineGap200 和ascender750，则制作ascender950。
5. 设置lineGap为 0。
6. 将更改合并到字体中： ftxdumperfuser -t hhea -A f YOUR_FONT.ttf

Once you do this, you might have to adjust your UI accordingly.

完成此操作后，您可能需要相应地调整 UI。

回答by detman

1. Download and Install Apple's Font Tools here: https://developer.apple.com/downloads/index.action?q=font(the download link is in the bottom)
2. Open the terminal and cd your way to where your font is
3. Run this command: ftxdumperfuser -t hhea -A d MY_FONT_NAME.ttf
4. Now you have an xml file with some of the font's properties, edit it in your text editor
5. Search for the "lineGap" property and add 200 to its value
6. Save the xml file
7. Run this command: ftxdumperfuser -t hhea -A f MY_FONT_NAME.ttf
8. Delete the xml file
9. Try the configured font on iOS 6 and see if it looks better.
10. If you need, you can go back to step 3 and add/subtract to the "lineGap" property. (I ended up adding 250 to my configuration)

1. 在此处下载并安装 Apple 的字体工具：https: //developer.apple.com/downloads/index.action?q=font （下载链接在底部）
2. 打开终端并 cd 到字体所在的位置
3. 运行这个命令：ftxdumperfuser -t hhea -A d MY_FONT_NAME.ttf
4. 现在你有一个包含一些字体属性的 xml 文件，在你的文本编辑器中编辑它
5. 搜索“lineGap”属性并将其值加 200
6. 保存xml文件
7. 运行此命令：ftxdumperfuser -t hhea -A f MY_FONT_NAME.ttf
8. 删除xml文件
9. 在 iOS 6 上尝试配置的字体，看看它是否看起来更好。
10. 如果需要，您可以返回第 3 步并添加/减去“lineGap”属性。（我最终在我的配置中添加了 250）

回答by Naiko

For those running OS X El Capitan and coming to this thread, you might have noticed that the Apple Font Tool Suite is no longer compatible (at least for now).

对于那些运行 OS X El Capitan 并访问此线程的用户，您可能已经注意到 Apple Font Tool Suite 不再兼容（至少目前是这样）。

But you can still perform the changes described by kolyuchiyand Joseph Linwith free font editing software FontForge.

但是您仍然可以使用免费字体编辑软件FontForge执行kolyuchiy和Joseph Lin描述的更改。

Open the font with FontForge and select Element in the top menu, then go to Font Info > OS/2 > Metrics. There you want to edit the HHEad Line Gap and HHead Ascent Offset values.

使用 FontForge 打开字体并在顶部菜单中选择 Element，然后转到 Font Info > OS/2 > Metrics。在那里您要编辑 HHEad Line Gap 和 HHead Ascent Offset 值。

Once you've done the necessary edits you can just export the font in File > Generate Fonts and select the right font format

完成必要的编辑后，您只需在“文件”>“生成字体”中导出字体并选择正确的字体格式

回答by Joshua Dance

We had the same issue with one of our custom fonts. We also "fixed" the problem by editing the font ascender property. However, we found that this created other problems and layout issues. For example dynamically setting cell height based on label height would blow up when using our ascender edited font.

我们的一种自定义字体也遇到了同样的问题。我们还通过编辑字体上升器属性“修复”了该问题。但是，我们发现这会产生其他问题和布局问题。例如，当使用我们的上升编辑字体时，根据标签高度动态设置单元格高度会爆炸。

What we ended up doing was changing the UIButton contentEdgetInsets property.

我们最终做的是更改 UIButton contentEdgetInsets 属性。

yourButton.contentEdgeInsets = UIEdgeInsetsMake(-10, 0, 0, 0);

Not sure which method is better, but just wanted to share another way to fix the problem.

不确定哪种方法更好，但只是想分享另一种解决问题的方法。

回答by DevilPinky

Thanks to the this answerI fixed my problem with Glyphs, but a little bit differently.

感谢这个答案，我用 Glyphs 解决了我的问题，但有点不同。

I opened my font with Glyphs (also works with Glyphs mini) and found this section there (this from Glyphs mini, to get there push i button in the right top corner):

我用 Glyphs 打开了我的字体（也适用于 Glyphs mini）并在那里找到了这个部分（这来自 Glyphs mini，点击右上角的 i 按钮）：

Just delete all of this alignment zones (or some of them) and it will fix this problem. Worked perfectly for me.

只需删除所有这些对齐区域（或其中一些），它就会解决这个问题。非常适合我。

回答by App Dev Guy

Creating attributed text from your labels text was the fix for me. Heres an extension:

从你的标签文本创建属性文本对我来说是修复。这是一个扩展：

extension UILabel {
    /// You can call with or without param values; without will use default 2.0
    func setLineSpacing(lineSpacing: CGFloat = 2.0, lineHeightMultiple: CGFloat = 2.0) {
        guard let labelText = self.text else { return }
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = lineSpacing
        paragraphStyle.lineHeightMultiple = lineHeightMultiple
        let attributedString:NSMutableAttributedString
        if let labelattributedText = self.attributedText {
            attributedString = NSMutableAttributedString(attributedString: labelattributedText)
        } else {
            attributedString = NSMutableAttributedString(string: labelText)
        }
        // (Swift 4.2 and above) Line spacing attribute
        attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value:paragraphStyle, range:NSMakeRange(0, attributedString.length))
        self.attributedText = attributedString
    }
}

For my custom font I got the result I need from:

对于我的自定义字体，我得到了我需要的结果：

self.myLabel.setLineSpacing(lineSpacing: 1.2, lineHeightMultiple: 1.2)

This works by using the native provided NSMutableParagraphStyle()which contains line height and spacing properties (which are accessible as @IBOutletproperties in the Storyboard too if you are not programming your labels).

这是通过使用NSMutableParagraphStyle()包含行高和间距属性的本机提供的（@IBOutlet如果您没有对标签进行编程，也可以作为Storyboard 中的属性访问）。

回答by Radoslav Balvan

I used https://github.com/fonttools/fonttools- very easy to use and free. In my case, the change of 'ascender'=1000 and 'lineGap'=0 in 'hhea' table did the trick.

我使用了https://github.com/fonttools/fonttools- 非常易于使用且免费。在我的例子中，'hhea' 表中 'ascender'=1000 和 'lineGap'=0 的变化起到了作用。

Based on article from Trevor Harmon https://medium.com/@thetrevorharmon/how-to-use-apples-font-tools-to-tweak-a-font-a386600255ae

基于 Trevor Harmon 的文章https://medium.com/@thetrevorharmon/how-to-use-apples-font-tools-to-tweak-a-font-a386600255ae

回答by RyanR

Have you tried Core Text? I've had some success rendering custom fonts through Core Text, but I don't know if it would fit your situation.

你试过核心文本吗？我在通过 Core Text 渲染自定义字体方面取得了一些成功，但我不知道它是否适合您的情况。