UIFontでラベルのフォントを変更する

[UIKit] [UIFont]

コードでラベルのフォントを変更する

ラベルにフォントを設定する

フォントを変更するのはとても簡単です。 変数としてフォントを用意しておき、それをパーツのfontプロパティに設定するだけです。 ここでは、「Zapfino」を設定してみています。

ストーリーボードでラベルを配置する場合は、まずストーリーボードとソースコードを接続しましょう。

/data/uploads/20200427053830.png

@IBOutlet weak var label: UILabel! // ストーリーボードで接続したUILabel

override func viewDidLoad() {
  super.viewDidLoad()
  // フォントを定義する
  let font = UIFont(name: "Zapfino", size: 20)
  // ラベルのフォントを設定する
  label.font = font
}

アプリの実行結果は以下のようになります。

/data/uploads/20200427052902.png

たとえば、アプリ全体を通して共通のフォントを使いたい場合には、font.swiftというようなファイルを新規作成して、フォントの定義を用意しておくとよいでしょう。

iOSで使えるフォント一覧

iOSで標準で使うことができるフォントは以下の通りです。 日本語表示のできるフォントはHiraMinProN-W3HiraMinProN-W6がありますが、他におしゃれなものはありません。

Copperplate-Light
Copperplate
Copperplate-Bold
AppleSDGothicNeo-Thin
AppleSDGothicNeo-Light
AppleSDGothicNeo-Regular
AppleSDGothicNeo-Bold
AppleSDGothicNeo-SemiBold
AppleSDGothicNeo-UltraLight
AppleSDGothicNeo-Medium
Thonburi
Thonburi-Light
Thonburi-Bold
GillSans-Italic
GillSans-SemiBold
GillSans-UltraBold
GillSans-Light
GillSans-Bold
GillSans
GillSans-SemiBoldItalic
GillSans-BoldItalic
GillSans-LightItalic
MarkerFelt-Thin
MarkerFelt-Wide
HiraMaruProN-W4
CourierNewPS-ItalicMT
CourierNewPSMT
CourierNewPS-BoldItalicMT
CourierNewPS-BoldMT
KohinoorTelugu-Regular
KohinoorTelugu-Medium
KohinoorTelugu-Light
AvenirNextCondensed-Heavy
AvenirNextCondensed-MediumItalic
AvenirNextCondensed-Regular
AvenirNextCondensed-UltraLightItalic
AvenirNextCondensed-Medium
AvenirNextCondensed-HeavyItalic
AvenirNextCondensed-DemiBoldItalic
AvenirNextCondensed-Bold
AvenirNextCondensed-DemiBold
AvenirNextCondensed-BoldItalic
AvenirNextCondensed-Italic
AvenirNextCondensed-UltraLight
TamilSangamMN
TamilSangamMN-Bold
HelveticaNeue-UltraLightItalic
HelveticaNeue-Medium
HelveticaNeue-MediumItalic
HelveticaNeue-UltraLight
HelveticaNeue-Italic
HelveticaNeue-Light
HelveticaNeue-ThinItalic
HelveticaNeue-LightItalic
HelveticaNeue-Bold
HelveticaNeue-Thin
HelveticaNeue-CondensedBlack
HelveticaNeue
HelveticaNeue-CondensedBold
HelveticaNeue-BoldItalic
TimesNewRomanPS-ItalicMT
TimesNewRomanPS-BoldItalicMT
TimesNewRomanPS-BoldMT
TimesNewRomanPSMT
Georgia-BoldItalic
Georgia-Italic
Georgia
Georgia-Bold
SinhalaSangamMN-Bold
SinhalaSangamMN
ArialRoundedMTBold
Kailasa-Bold
Kailasa
KohinoorDevanagari-Regular
KohinoorDevanagari-Light
KohinoorDevanagari-Semibold
KohinoorBangla-Regular
KohinoorBangla-Semibold
KohinoorBangla-Light
NotoSansOriya-Bold
NotoSansOriya
ChalkboardSE-Bold
ChalkboardSE-Light
ChalkboardSE-Regular
NotoSansKannada-Bold
NotoSansKannada-Light
NotoSansKannada-Regular
AppleColorEmoji
PingFangTC-Regular
PingFangTC-Thin
PingFangTC-Medium
PingFangTC-Semibold
PingFangTC-Light
PingFangTC-Ultralight
GeezaPro-Bold
GeezaPro
DamascusBold
DamascusLight
Damascus
DamascusMedium
DamascusSemiBold
Noteworthy-Bold
Noteworthy-Light
Avenir-Oblique
Avenir-HeavyOblique
Avenir-Heavy
Avenir-BlackOblique
Avenir-BookOblique
Avenir-Roman
Avenir-Medium
Avenir-Black
Avenir-Light
Avenir-MediumOblique
Avenir-Book
Avenir-LightOblique
KohinoorGujarati-Light
KohinoorGujarati-Bold
KohinoorGujarati-Regular
DiwanMishafi
AcademyEngravedLetPlain
PartyLetPlain
Futura-CondensedExtraBold
Futura-Medium
Futura-Bold
Futura-CondensedMedium
Futura-MediumItalic
ArialHebrew-Bold
ArialHebrew-Light
ArialHebrew
Farah
MuktaMahee-Light
MuktaMahee-Bold
MuktaMahee-Regular
NotoSansMyanmar-Regular
NotoSansMyanmar-Bold
NotoSansMyanmar-Light
Arial-BoldMT
Arial-BoldItalicMT
Arial-ItalicMT
ArialMT
Chalkduster
Kefa-Regular
HoeflerText-Italic
HoeflerText-Black
HoeflerText-Regular
HoeflerText-BlackItalic
Optima-ExtraBlack
Optima-BoldItalic
Optima-Italic
Optima-Regular
Optima-Bold
Galvji-Bold
Galvji
Palatino-Italic
Palatino-Roman
Palatino-BoldItalic
Palatino-Bold
MalayalamSangamMN-Bold
MalayalamSangamMN
AlNile
AlNile-Bold
LaoSangamMN
BradleyHandITCTT-Bold
HiraMinProN-W3
HiraMinProN-W6
PingFangHK-Medium
PingFangHK-Thin
PingFangHK-Regular
PingFangHK-Ultralight
PingFangHK-Semibold
PingFangHK-Light
Helvetica-Oblique
Helvetica-BoldOblique
Helvetica
Helvetica-Light
Helvetica-Bold
Helvetica-LightOblique
Courier-BoldOblique
Courier-Oblique
Courier
Courier-Bold
Cochin-Italic
Cochin-Bold
Cochin
Cochin-BoldItalic
TrebuchetMS-Bold
TrebuchetMS-Italic
Trebuchet-BoldItalic
TrebuchetMS
DevanagariSangamMN
DevanagariSangamMN-Bold
Rockwell-Italic
Rockwell-Regular
Rockwell-Bold
Rockwell-BoldItalic
SnellRoundhand
SnellRoundhand-Bold
SnellRoundhand-Black
ZapfDingbatsITC
BodoniSvtyTwoITCTT-Bold
BodoniSvtyTwoITCTT-BookIta
BodoniSvtyTwoITCTT-Book
Verdana-Italic
Verdana
Verdana-Bold
Verdana-BoldItalic
AmericanTypewriter-CondensedBold
AmericanTypewriter-Condensed
AmericanTypewriter-CondensedLight
AmericanTypewriter
AmericanTypewriter-Bold
AmericanTypewriter-Semibold
AmericanTypewriter-Light
AvenirNext-Medium
AvenirNext-DemiBoldItalic
AvenirNext-DemiBold
AvenirNext-HeavyItalic
AvenirNext-Regular
AvenirNext-Italic
AvenirNext-MediumItalic
AvenirNext-UltraLightItalic
AvenirNext-BoldItalic
AvenirNext-Heavy
AvenirNext-Bold
AvenirNext-UltraLight
Baskerville-SemiBoldItalic
Baskerville-SemiBold
Baskerville-BoldItalic
Baskerville
Baskerville-Bold
Baskerville-Italic
KhmerSangamMN
Didot-Bold
Didot
Didot-Italic
SavoyeLetPlain
BodoniOrnamentsITCTT
Symbol
Charter-BlackItalic
Charter-Bold
Charter-Roman
Charter-Black
Charter-BoldItalic
Charter-Italic
Menlo-BoldItalic
Menlo-Bold
Menlo-Italic
Menlo-Regular
NotoNastaliqUrdu
NotoNastaliqUrdu-Bold
BodoniSvtyTwoSCITCTT-Book
DINAlternate-Bold
Papyrus-Condensed
Papyrus
HiraginoSans-W3
HiraginoSans-W6
HiraginoSans-W7
PingFangSC-Medium
PingFangSC-Semibold
PingFangSC-Light
PingFangSC-Ultralight
PingFangSC-Regular
PingFangSC-Thin
MyanmarSangamMN
MyanmarSangamMN-Bold
AppleSymbols
Zapfino
BodoniSvtyTwoOSITCTT-BookIt
BodoniSvtyTwoOSITCTT-Book
BodoniSvtyTwoOSITCTT-Bold
EuphemiaUCAS
EuphemiaUCAS-Italic
EuphemiaUCAS-Bold
DINCondensed-Bold

一覧を出力するコードは次のような感じで書きます。

    let view = UIScrollView(frame: self.view.bounds)
    view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    view.contentSize = .zero
    
    UIFont.familyNames.forEach { (familyName) in
      let fontsInFamily = UIFont.fontNames(forFamilyName: familyName) fontsInFamily.forEach({ (fontName) in
        print(fontName)
        let label = UILabel()
        label.text = fontName
        label.font = UIFont(name: fontName, size: UIFont.labelFontSize)
        label.sizeToFit()
        label.frame.origin.y = view.contentSize.height
        view.contentSize.width = max(view.contentSize.width, label.frame.width)
        view.contentSize.height += label.frame.height + 10
        view.addSubview(label)
      })
    }
    self.view.addSubview(view)

書体を画面でみると以下のようなものになります。

/data/uploads/20200427051936.png /data/uploads/20200427051940.png /data/uploads/20200427051942.png /data/uploads/20200427051945.png /data/uploads/20200427051949.png /data/uploads/20200427051951.png /data/uploads/20200427051953.png /data/uploads/20200427051956.png /data/uploads/20200427051959.png /data/uploads/20200427052002.png /data/uploads/20200427052004.png /data/uploads/20200427052006.png /data/uploads/20200427052009.png /data/uploads/20200427052011.png

Posted_at:2020-04-27