ios UIButton 自定义字体垂直对齐

UIButton custom font vertical alignment

提问by Pete

I've got a UIButtonwhich uses a custom font, which is set when my view loads:

我有一个UIButton使用自定义字体的字体，该字体在我的视图加载时设置：

- (void)viewDidLoad
{
    [super viewDidLoad];    
    self.searchButton.titleLabel.font = [UIFont fontWithName: @"FONTNAME" size: 15.0 ];
}

The problem I've got is that the font is appearing to float up of the center line. If I comment out this line, the default font appears vertically centered fine. But changing to the custom font breaks the vertical alignment.

我遇到的问题是字体似乎漂浮在中心线上。如果我注释掉这一行，默认字体会很好地垂直居中显示。但是更改为自定义字体会破坏垂直对齐。

I'm getting the same issue on a Table Cell with a custom font too.

我在带有自定义字体的表格单元格上也遇到了同样的问题。

Do I need to tell the view somewhere that the custom font is not as tall as other fonts?

我是否需要在某处告诉视图自定义字体不如其他字体高？

EDIT: I've just realized that the font I'm using is a Windows TrueType Font. I can use it fine in TextEdit on the Mac, only a problem with the alignment in my App

编辑：我刚刚意识到我使用的字体是 Windows TrueType 字体。我可以在 Mac 上的 TextEdit 中很好地使用它，只是我的应用程序中的对齐有问题

回答by kolyuchiy

A similar problem was discussed at Custom installed font not displayed correctly in UILabel. There was no solution given.

在 UILabel 中未正确显示自定义安装的字体中讨论了类似的问题。没有给出解决方案。

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 字体。

OS X El Capitan

OS X El Capitan

The Apple Font Tool Suite Installer doesn't work anymore on OSX El Capitan because of SIPbecause it tries to install the binary files into a protected directory. You have to manually extract ftxdumperfuser. First copy the pkg from the dmg to a local directory afterwards unpack the OS X Font Tools.pkgwith

由于SIP，Apple Font Tool Suite 安装程序不再在 OSX El Capitan 上工作，因为它试图将二进制文件安装到受保护的目录中。您必须手动提取ftxdumperfuser. 首先，PKG从伤害到本地目录拷贝解压后的OS X Font Tools.pkg同

~$ xar -xf OS\ X\ Font\ Tools.pkg

Now navigate into the folder fontTools.pkgwith

现在，导航到该文件夹fontTools.pkg与

~$ cd fontTools.pkg/

Extract payload with

提取有效载荷

~$ cat Payload | gunzip -dc | cpio -i

Now the ftxdumperfuserbinary is in your current folder. You could move it to /usr/local/bin/so that you can use it in every folder inside of the terminal application with the following.

现在ftxdumperfuser二进制文件在您的当前文件夹中。您可以将其移动到，/usr/local/bin/以便您可以在终端应用程序内的每个文件夹中使用以下内容。

~$ mv ftxdumperfuser /usr/local/bin/

回答by Jordi Corominas

I solved the problem adjusting the top content (not the title!) inset.

我解决了调整顶部内容（不是标题！）插图的问题。

For example: button.contentEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 0.0, 0.0);

例如： button.contentEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 0.0, 0.0);

Good luck!

祝你好运！

回答by dollar2048

I think this is the best answer.no playing with ascender, numberOfHMetrics etc... just import-export by Glyphsapplication and Job done. Thanks to this answer: https://stackoverflow.com/a/16798036/1207684

我认为这是最好的答案。没有玩上升器，numberOfHMetrics 等......只需通过Glyphs应用程序导入导出并完成工作。感谢这个答案：https: //stackoverflow.com/a/16798036/1207684

回答by Mats

Not sure if this will help as it may depend on your font, but it could be that your baseline is misaligned.

不确定这是否会有所帮助，因为它可能取决于您的字体，但可能是您的基线未对齐。

self.searchButton.titleLabel.baselineAdjustment = 
    UIBaselineAdjustmentAlignCenters;

回答by Srikar Appalaraju

You can try this out in Interface Builder. Here is a snapshot of how to do it -

您可以在 Interface Builder 中尝试一下。这是如何做到这一点的快照 -

As you can see trying to do this in IB has its own benefits.

正如您所看到的，在 IB 中尝试这样做有其自身的好处。

回答by NiFi

Late to the party, but as this issue hit me for the Nth time, I thought I'd post the simplest solution I've found: using Python FontTools.

聚会迟到了，但是当这个问题第 N 次袭击我时，我想我会发布我找到的最简单的解决方案：使用Python FontTools。

1. Install Python 3 if it's not available on your system.

2. Install FontTools

   pip3 install fonttools

   FontToolsinclude a TTX tool which enables conversion to and from XML.

3. Convert your font to .ttx in the same folder

   ttx myFontFile.otf

4. Make the necessary edits to .ttx and delete the .otf file as this will be replaced in the next step.

5. Convert the file back to .otf

   ttx myFontFile.ttx

1. 如果 Python 3 在您的系统上不可用，请安装它。

2. 安装字体工具

   pip3 install fonttools

   FontTools包含一个 TTX 工具，可以实现与 XML 的转换。

3. 在同一文件夹中将您的字体转换为 .ttx

   ttx myFontFile.otf

4. 对 .ttx 进行必要的编辑并删除 .otf 文件，因为这将在下一步中替换。

5. 将文件转换回 .otf

   ttx myFontFile.ttx

---

---

Motivation:动机：在solution by kolyuchikolyuchi 的解决方案是不完整的，即使有this extended installation flow这个扩展的安装流程，ftxdumperfuserftxdumperfuser在 10.15.2 Catalina 上运行导致错误。

回答by Pete

NOTE : There clearly is a better answer than this (the one with hundreds of up votes above)

注意：显然有比这更好的答案（上面有数百票的答案）

I can't find a real answer to this, other than edit the font file. Which I don't know how to do and didn't have time, so I just made my pictures narrower, and adjusted the cell to make it look like it was aligned properly.

除了编辑字体文件之外，我找不到真正的答案。我不知道该怎么做也没有时间，所以我只是把我的图片缩小了，并调整了单元格，使它看起来像正确对齐。

A dirty little hack I suppose, but it works and it's fine.

我想这是一个肮脏的小黑客，但它有效并且很好。

This was the only font that caused a problem, so the issue must be with the font file.

这是唯一导致问题的字体，因此问题必须出在字体文件上。

It wasn't actually me that concluded this, it was another SO post, but I can't find it anywhere, if I come across it again I'll stick it in the comments.

这实际上不是我得出的结论，这是另一个 SO 帖子，但我在任何地方都找不到，如果我再次遇到它，我会将其粘贴在评论中。