カスタムインストールされたフォントがUILabelに正しく表示されない

83

Adobe Font Collection ProPackageから入手したHelveticaNeueCondensedフォントを使用しようとしています。残念ながら、内で使用すると正しく描画されないようUILabelです。

行の高さは正しく計算されているようですが（私は思います）、フォントを表示すると、境界ボックスの最上部に揃えられます。[myLabel sizeToFit]このスクリーンキャプチャを作成するために、電話をかけて幅を調整しただけです。

誤ったフォントレンダリングのスクリーンキャプチャ

太字バージョンと通常バージョンのフォントの両方で同じ問題が発生しました。OSXからHelveticaNeue Boldのバージョンをプルしてデバイスに配置すると、正常に表示されます（上の画像の背景は緑色）。

フォントファイルまたはコードのいずれかで、このように描画される原因となる可能性があるのは何ですか？

ios  ios4  fonts  uilabel  uifont 
— MikeQ
ソース
これらの問題を修正できるUIFontのサブクラスをどうにかして作成できますか？
— MikeQ 2011年
+ 1-私にとっても同じ問題です。私はこれを助けるためにZFontを使ってみました、そしてそれはいくらか助けますが、ほとんど十分ではありません。これらのカスタムフォントでリーディングがどのように解釈されるかについては、何かがおかしいかもしれません（手がかりはありませんが、実際には、それはそれと関係があるのではないかと思います！）。
— Joe D'Andrea
こんにちは！最終的に解決策を見つけましたか？はいの場合は質問に答えてください。前もって感謝します。
— すぐに2011年
残念ながら、いいえ、私はしませんでした。そして、私はこの問題を引き起こした元のフォントファイルにアクセスできなくなりました。kolyuchiyの答えが好きです。特定のケースでテストできればいいのにと思います。
— MikeQ 2012
ご存知のとおり、これはiOS7で修正されています。
— 男2013年

回答:

125

私はここにttfフォントファイルにパッチを当てることを含む解決策を投稿しました：

これは、UILabel、UIButtonなどで同じ問題が発生したカスタムフォントで機能したソリューションです。フォントの問題は、システムフォントの値と比較してアセンダープロパティが小さすぎるという事実であることが判明しました。Ascenderは、フォントの文字の上にある垂直方向の空白です。フォントを修正するには、Apple Font ToolSuiteコマンドラインユーティリティをダウンロードする必要があります。次に、フォントを取得して、次の手順を実行します。

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

これにより、が作成されますBold.hhea.xml。テキストエディタで開き、ascender属性の値を増やします。自分に最適な正確な値を見つけるには、少し実験する必要があります。私の場合は、750から1200に変更しました。次に、次のコマンドラインでユーティリティを再度実行して、変更をttfファイルにマージします。

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

次に、結果のttfフォントをアプリで使用します。

— kolyuchiy
ソース
このツールを提案してくれてありがとう！同様に「-tname」セクションを編集して、フォントの名前を変更するためにも使用できます。
— フィリップ
1
MensisまたはFontForgeを試すこともできます。これらのアプリを使用して、アセンダープロパティを変更することもできます。
— kolyuchiy 2012
1
あなたは私の日を作りました。私は数週間以来、この問題に悩まされていました。かなりよく使えます！
— TheBeardedCoda 2012年
1
アセンダーを増やすと行間隔が増えることに注意してください。アプリに複数行のテキストがある場合、これが問題になる可能性があります。
— Pavel Alexeev 2013
2
**以下のJOSEPHLINの回答も参照してください** iOS6とiOS7の両方で適切な位置合わせを確実にするには、アセンダーを調整し、ラインギャップをゼロに設定する必要があります。
— ケンM.ハガティ2013年
64

つまり、これはkolyuchiyの答えの修正版です。

フォントをGlyphsで開き、何も変更せずにエクスポートしました。どういうわけか、魔法のように、垂直方向の配置の問題はなくなりました！

さらに良いのは、新しいフォントがのようなメソッドでうまく機能するsizeWithFont:ため、Joshuaが言及した問題がないことです。

私が言及したkolyuchiyコマンドでHHEAテーブルで見ていた、とグリフだけではないことに気づい変更ascenderするだけでなく、lineGapそしてnumberOfHMetrics私のため。

前の生データは次のとおりです。

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"

以降：

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"

したがって、ストーリーの教訓は、アセンダーを増やすだけでなく、他の関連する値も変更することです。

私はタイポグラフィの専門家ではないので、その理由と方法を実際に説明することはできません。誰かがより良い説明を提供することができればそれは大いにありがたいです！:)

— ジョセフ・リン
ソース
私は以前そのベースラインのiOS 6にずれてしまうのiOS 6とiOS 7の同じかなりのグリフ、フォント振る舞いを使用して再使用していTTFを保存した後
— leolobato
6
ついにこれを理解してくれてありがとう！どうやらiOS6はlineGapプロパティを尊重しますが、iOS7はそれを無視します。解決策は、lineGap 0を作成し、それに応じてアセンダーを大きくすることです。これは、グリフはまったく同じものです、そしてそれは、iOS 6とiOS 7の両方で動作します
— phatmann
はい。lineGapをゼロ（0）に減らし、アセンダーを残す（1991年）ことで、Fedoraの無料の「Overpass」フォントで問題が解決しました。解決策のご案内をありがとうございました。iOS6とiOS7の両方で動作します。
— stephenhouser 2014
GlyphsとOSX Font Toolsで何度か失敗した後、@ phatmannと同じ結論に達しました。重要なのは、グリフで単にエクスポートするのではなく、OS Xフォントツールでこのトリックを使用することをお勧めします。グリフはフォントのスタイル名とポストスクリプト名も編集し、状況によってはxCodeがフォントを見つけられなくなるためです。
— huong 2014年
32

iOS 6はフォントのlineGapプロパティを尊重しますが、iOS7はそれを無視します。したがって、ラインギャップが0のカスタムフォントのみが両方のオペレーティングシステムで正しく機能します。

解決策は、lineGap 0を作成し、それに応じてアセンダーを大きくすることです。上記の回答によると、1つの解決策は、グリフからインポートおよびエクスポートすることです。ただし、アプリの将来のバージョンでこの「バグ」が修正される可能性があることに注意してください。

より堅牢な解決策は、この投稿に従って、自分でフォントを編集することです。具体的には、

  1. OSXフォントツールをインストールします。
  2. フォントメトリックをファイルにダンプします。 ftxdumperfuser -t hhea -A d YOUR_FONT.ttf
  3. ダンプされたファイルをエディターで開きます。
  4. ascenderプロパティの値をプロパティに追加して、プロパティを編集しますlineGap。たとえば、lineGapが200で、ascenderが750の場合、ascender950を作成します。
  5. lineGapを0に設定します。
  6. 変更をフォントにマージします。 ftxdumperfuser -t hhea -A f YOUR_FONT.ttf

これを行ったら、それに応じてUIを調整する必要がある場合があります。

— ファットマン
ソース
4

カスタムフォントの1つでも同じ問題が発生しました。また、font ascenderプロパティを編集することで、この問題を「修正」しました。ただし、これにより他の問題やレイアウトの問題が発生することがわかりました。たとえば、ラベルの高さに基づいてセルの高さを動的に設定すると、アセンダーで編集されたフォントを使用すると爆発します。

最終的に行ったのは、UIButtoncontentEdgetInsetsプロパティを変更することでした。 

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

どちらの方法が優れているかはわかりませんが、問題を解決するための別の方法を共有したかっただけです。

— ジョシュアダンス
ソース
2
同意した。アセンダープロパティの修正は理想的な解決策ではありません
— Max MacLeod 2013年
1
こんにちはジョシュア、私はあなたが言及した問題を修正するかもしれない方法を投稿しました。つまり、アセンダーとともにさらにいくつかのプロパティを変更する必要があります。
— ジョセフ・リン
4
  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を追加することになりました）
— nurnachman
ソース
4

OS X El Capitanを実行していてこのスレッドにアクセスしている人は、Apple Font Tool Suiteの互換性がなくなっていることに気付いたかもしれません（少なくとも今のところ）。

ただし、kolyuchiyとJoseph Linが説明した変更は、無料のフォント編集ソフトウェアFontForgeを使用して実行できます。

FontForgeでフォントを開き、トップメニューでElementを選択してから、Font Info> OS / 2> Metricsに移動します。そこで、HHEad LineGapとHHeadAscentOffsetの値を編集します。

必要な編集が完了したら、[ファイル]> [フォントの生成]でフォントをエクスポートし、適切なフォント形式を選択できます。

— ナイコ
ソース
3

この回答のおかげで、グリフの問題を修正しましたが、少し異なります。

フォントをGlyphsで開いて（Glyphs miniでも機能します）、そこにこのセクションがあります（Glyphs miniから、右上隅にあるiボタンを押してください）。

ここに画像の説明を入力してください

このアライメントゾーンのすべて（または一部）を削除するだけで、この問題が修正されます。私のために完璧に働いた。

— DevilPinky
ソース
2

ラベルテキストから属性テキストを作成することは、私にとっての修正でした。ここに拡張機能があります：

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
    }
}

カスタムフォントの場合、必要な結果が得られました。

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

これNSMutableParagraphStyle()は、行の高さと間隔のプロパティ（@IBOutletラベルをプログラミングしていない場合はストーリーボードのプロパティとしてもアクセス可能）を含む提供されたネイティブを使用して機能します。

— App Dev Guy
ソース
1

Core Textを試しましたか？Core Textを使用してカスタムフォントをレンダリングすることに成功しましたが、それがあなたの状況に合うかどうかはわかりません。

— RyanR
ソース
1
CoreTextにこの問題がないことを確認できます。
— 2013
0

これらのコマンドラインユーティリティで問題が発生した場合は、ウィンドウでfontcreatorを試してください。設定メニューからフォントアセンダーを変更します。

— Gaurav
ソース
0

コマンドが見つからないというエラーのためにMacOS Mojaveでftxdumperfuser（kolyuchiy answer）を使用するのに苦労している人のために：

  • Appleからフォントツールパッケージをダウンロードします。https://developer.apple.com/download/more/?q=fontでそれらを見つけ 、XCode11用のものを選びました。
  • dmgファイルをマウントします
  • ディスクイメージを入力してくださいcd / Volumes / macOS \ Font \ Tools
  • パッケージを選択したフォルダーに抽出します。pkgutil--expand-fullmacOS\ Font \ Tools.pkg〜 / font-tools
  • CLIツールが〜/ font-tools / FontCommandLineTools.pkg / Payloadで利用できるようになりました。フォルダーをパス（export PATH="$PATH:$HOME/font-tools/FontCommandLineTools.pkg/Payload"）に追加するか、utilsをbinフォルダーにコピーできます。
— ArnoldasLiudžius
ソース
-3

SpriteKitゲームの象徴的な「FontAwesome」フォントでも同様の問題が発生しました。SKLabelNodeのSKLabelVerticalAlignmentModeプロパティを.Centerに設定するとうまくいきました。

myLabel.verticalAlignmentMode = SKLabelVerticalAlignmentMode.Center

誰かが同じ問題に苦しんでいる場合に備えて、共有したかっただけです。

— requig
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.