[iOS - swiftUI] Font 사용 방법 (systemFont, font weight, design, textStyle, font style, kerning, tracking)

목차) SwiftUI의 기본 - 목차 링크

Font를 사용하기 전에, dark mode도 확인위한 preview 설정

• preview에 ColorScheme.allCases로 컬러 스킴에 접근하여 preferredColorScheme을 지정하여 dark mode도 확인할 수 있도록 설정

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ForEach(ColorScheme.allCases, id: \.self) {
      ContentView().preferredColorScheme($0)
    }
  }
}

System Font 사용 방법

• systemFont
  • .font로 Text에 적용이 가능
  • systemFont는 맥에서 자주 사용되는 SF pro 폰트(=San Francisco font)를 의미

var body: some View {
  VStack {
    Text("Text1")
    
    Text("Text2")
      .font(.system(size: 12))
  }
}

cf) Text("some text")를 사용하면 자동으로 black 컬러로 지정되고, dark mode에서는 white color로 지정

dark mode x	dark mode o

• weight 속성
  • weight는 굵기를 의미
  • SwiftUI에서는 9가지의 weight를 제공
  • weight를 따로 선언하지 않으면 regular 속성이 적용

dark mode x	dark mode o

// bold
Text("bold")
  .font(.system(size: 15, weight: .bold))

• design 속성
  • 글자의 모양을 정의 (4가지 존재)
  • 영문에만 적용

dark mode x	dark mode o

// default
Text(".default")
  .font(.system(size: 15, weight: .black, design: .default))

TextStyle

• 애플 내부적으로 Font안에 TextStyle이라는 타입을 정의하여, 그 안에 static let으로 폰트를 미리 정의해놓은 속성들

// TextStyle 예제 코드

Text(".largeTitle")
  .font(.system(.largeTitle))

FontStyle

• font style
  • 배경 색상 backgroundColor(_:)
  • 색상 foregroundColor(_:)
  • 볼드 bold()
  • 기울임 italic()
  • 취소선 strikethrough()
  • 밑줄 underline()
  • baselineOffset

ex) baselineOffset 

Text("baselineOffset(0)")
  .baselineOffset(0)
  .background(.red)
Text("baselineOffset(10)")
  .baselineOffset(10)
  .background(.green)
Text("baselineOffset(-10)")
  .baselineOffset(-10)
  .background(.blue)

Kerning, Tracking

• kerning은 폰트 종류에 따라 달라지며, 각 폰트 특성에 따라 글자 간격이 조절
• tracking은 폰트 종류와 관계 없이 글 자 삭이의 간격을 일정하게 설정

ex) SF Pro 폰트에서는 글자 간격이 동일하게 적용 

tacking과 kerning

* 전체 코드: https://github.com/JK0369/ExFont

* 참고

https://developer.apple.com/documentation/swiftui/font/largetitle

https://developer.apple.com/documentation/swiftui/text/tracking(_:) 

https://developer.apple.com/documentation/swiftui/text/kerning(_:)

https://developer.apple.com/documentation/swiftui/font