はじめに
こんにちは、レコチョクでiOSアプリ開発をしている副山です。
dヒッツのiOSアプリでは、Visual Regression Testing（以下、VRT）を導入しています。Interface Builderで作成されたUIをコードベースに移植する際に、VRTを実行するとテストが失敗するケースがありました。
VRTで失敗した部分は以下のように、日本語のテキスト部分はズレが発生していなかったのに対し、英語のテキスト部分ではズレが発生するというケースになっていました。
| 変更前UI | 変更後UI | Difference |
|---|---|---|
 |
 |
 |
この要因を調査したところ、System Fontsの使用に関して注意すべき点があることに気づいたため、この記事で紹介します。
VRTが失敗した原因
Interface Builderで作成されたUIのプロパティは、フォントが
System Bold と設定されていました。
これをコードベースに移植する際に、以下のように実装していました。
label.font = .boldSystemFont(ofSize: 32.0)
boldSystemFont(ofSize:) はメソッド名から、Weightに Bold が設定されると考えていましたが、実際には Semibold が設定されていました。これはView Hierarchyで確認できます。
その結果、英語部分のフォントが異なり、VRTで差異が検出されました。
一方、日本語部分では
Bold と Semibold のWeightを変更してもフォントに変化がないため、差分は発生しませんでした。
| Semibold | Bold | Difference |
|---|---|---|
 |
 |
 |
フォントのWeightを正しく
Bold に設定するには、以下のように systemFont(ofSize:weight:) を使用します。
let label = UILabel()
label.font = .systemFont(ofSize: 32.0, weight: .bold)
この問題を調査する中で、System Fontsの挙動についてさらに詳しく知る必要があると感じました。
したがって、ここからは調査・検証した内容について説明します。
System Fontsとは
Appleは以下2種類のSystem Fontsを提供しています。
- San Francisco（SF） デジタルディスプレイでの表示に最適化されており、視認性や可読性が高いフォントです。SFはサンセリフ体で、シンプルでモダンなデザインが特徴です。日本ではゴシック体にあたります。
New York（NY） クラシックでエレガントな印象を与えるフォントで、長文の可読性を重視した設計がなされています。NYはセリフ体で、日本では明朝体にあたるものです。
また、上記のフォントには以下の9種類のWeightが提供されています。
副山俊輔
