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

我试图使用一个 Helvetica 新浓缩字体,我得到了从 Adobe 字体收集专业软件包。不幸的是,当我在 UILabel中使用它时,它似乎绘制错误。

行高似乎计算正确(我认为) ,但是当字体显示时,它与边框的顶部对齐。我调用了 [myLabel sizeToFit],只调整了宽度来生成这个屏幕截图:

Screen capture of incorrect font rendering

我在使用粗体和普通字体时遇到了同样的问题。我能够从 OSX 中提取一个版本的 Helvetica Neue Bold,并把它放在我的设备上,它显示良好(上图中的绿色背景)。

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

27570 次浏览

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.

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

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 Suite command line utilities. Then take your font and do the following:

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

This will create Bold.hhea.xml. Open it with a text editor and increase the value of ascender attribute. 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:

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

Then just use the resulting ttf font in your app.

If your are having trouble with these command line utilities then try fontcreator on window. and change font assender from its setting menu.

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.

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

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

So this is a modified version of kolyuchiy's answer.

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

What's better is that the new font plays nicely with methods like sizeWithFont:, so it doesn't have the issues mentioned by 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 lineGap and numberOfHMetrics for me.

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! :)

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.

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

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 ascender property by adding the value of the lineGap property to it. For example, if the lineGap is 200 and the ascender is 750, make the ascender 950.
  5. Set the lineGap to 0.
  6. Merge the changes into the font: ftxdumperfuser -t hhea -A f YOUR_FONT.ttf

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

  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)

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

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):

enter image description here

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

I had a similar issue with iconic "FontAwesome" font in my Sprite Kit game. Setting the SKLabelNode's SKLabelVerticalAlignmentMode property to .Center worked for me.

myLabel.verticalAlignmentMode = SKLabelVerticalAlignmentMode.Center

Just wanted to share in case somebody would be struggling with the same problem.

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).

But you can still perform the changes described by kolyuchiy and Joseph Lin with free font editing software FontForge.

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.

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

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 @IBOutlet properties in the Storyboard too if you are not programming your labels).

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.

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

For anyone who are struggling to use ftxdumperfuser (kolyuchiy answer) on Mac OS Mojave because of command not found error:

  • Download the font tools package from Apple. Found them at https://developer.apple.com/download/more/?q=font, picked the one for XCode 11.
  • Mount the dmg file
  • Enter the disk image cd /Volumes/macOS\ Font\ Tools
  • Extract the package to a folder of your choosing: pkgutil --expand-full macOS\ Font\ Tools.pkg ~/font-tools
  • The CLI tools are now available in ~/font-tools/FontCommandLineTools.pkg/Payload, you may add the folder to your path (export PATH="$PATH:$HOME/font-tools/FontCommandLineTools.pkg/Payload"), or copy the utils to your bin folder.