font-synthesis

CSS font-synthesis 속성은 브라우저가 굵은 글꼴과 이탤릭 글꼴을 합성하는 것을 허용할지 설정합니다.

구문

font-synthesis는 다음 방법 중 하나를 사용해 지정합니다.

  • none 키워드.
  • weight 또는 style 키워드.
  • weightstyle 키워드.

none
굵은 글꼴과 이탤릭 글꼴의 합성을 금지합니다.
weight
필요한 경우 굵은 글꼴을 합성할 수 있습니다.
style
필요한 경우 이탤릭 글꼴을 합성할 수 있습니다.

설명

대부분의 표준 서양 글꼴은 이탤릭과 굵은 글꼴을 포함하고 있으나 상용 글꼴은 그렇지 않은 경우도 많습니다. 한국, 중국, 일본을 포함한 비 알파벳 문화권의 문자 체계는 보통 이런 변형을 포함하지 않으며 브라우저의 글꼴 합성으로 인해 가독성이 떨어질 수 있습니다. 이 두 가지 경우에 대해 font-synthesis를 사용해 기본 글꼴 합성을 끄는 것이 좋을 수도 있습니다.

형식 정의

초기값weight style
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속yes
Computed valueas specified
Animation typediscrete

형식 구문

none | [ weight || style ]

예제

글꼴 합성 비활성화

HTML

<em class="syn">절 합성하세요! Synthesize!</em>
<br/>
<em class="no-syn">절 합성하지 마세요! Synthesize!</em>

CSS

em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight;
}
.no-syn {
  font-synthesis: none;
}

결과

명세

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-synthesis' in that specification.
Candidate Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-synthesisChrome No support NoEdge No support NoFirefox Full support 34
Full support 34
No support 33 — 34
Disabled
Disabled From version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari Full support 9WebView Android No support NoChrome Android No support NoFirefox Android Full support 34Opera Android No support NoSafari iOS Full support 9Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

같이 보기