font-synthesis
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022년 1월.
* Some parts of this feature may have varying levels of support.
CSS font-synthesis 속성은 브라우저가 굵은 글꼴과 이탤릭 글꼴을 합성하는 것을 허용할지 설정합니다.
시도해 보기
font-synthesis: weight style small-caps; font-synthesis: none; font-synthesis: weight; font-synthesis: style; font-synthesis: small-caps; font-synthesis: position; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> <p class="english"> This font does not include <span class="bold">bold</span>, <span class="italic">italic</span>, <span class="small-caps">small-caps</span>, and <span class="sub">subscript</span> or <span class="sup">superscript</span> variants. </p> <p class="chinese"> 中文排版通常不运用<span class="bold">粗体</span>或<span class="italic" >斜体</span ><span class="sub">常不</span><span class="sup">运用</span>。 </p> </div> </section> @font-face { font-family: Oxygen; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/oxygen/v14/2sDfZG1Wl4LcnbuKjk0m.woff2") format("woff2"); } /* [108] */ @font-face { font-family: "Ma Shan Zheng"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.108.woff2") format("woff2"); } /* [110] */ @font-face { font-family: "Ma Shan Zheng"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.110.woff2") format("woff2"); } /* [117] */ @font-face { font-family: "Ma Shan Zheng"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.117.woff2") format("woff2"); } /* [118] */ @font-face { font-family: "Ma Shan Zheng"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.118.woff2") format("woff2"); } /* [119] */ @font-face { font-family: "Ma Shan Zheng"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.119.woff2") format("woff2"); } .english { font-size: 1.2em; font-family: Oxygen; } .chinese { font-size: 1.2em; font-family: "Ma Shan Zheng"; } .bold { font-weight: bold; } .italic { font-style: italic; } .small-caps { font-variant: small-caps; } .sub { font-variant: sub; } .sup { font-variant: super; } 구문
font-synthesis는 다음 방법 중 하나를 사용해 지정합니다.
none키워드.weight또는style키워드.weight와style키워드.
값
설명
대부분의 표준 서양 글꼴은 이탤릭과 굵은 글꼴을 포함하고 있으나 상용 글꼴은 그렇지 않은 경우도 많습니다. 한국, 중국, 일본을 포함한 비 알파벳 문화권의 문자 체계는 보통 이런 변형을 포함하지 않으며 브라우저의 글꼴 합성으로 인해 가독성이 떨어질 수 있습니다. 이 두 가지 경우에 대해 font-synthesis를 사용해 기본 글꼴 합성을 끄는 것이 좋을 수도 있습니다.
형식 정의
| 초기값 | weight style small-caps position |
|---|---|
| 적용대상 | all elements and text. It also applies to ::first-letter and ::first-line. |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |
형식 구문
font-synthesis =
none |
[ weight || style || small-caps || position ]
예제
글꼴 합성 비활성화
HTML
html
<em class="syn">절 합성하세요! Synthesize!</em> <br /> <em class="no-syn">절 합성하지 마세요! Synthesize!</em> CSS
css
em { font-weight: bold; } .syn { font-synthesis: style weight; } .no-syn { font-synthesis: none; } 결과
명세
| Specification |
|---|
| CSS Fonts Module Level 4 # font-synthesis |
브라우저 호환성
Loading…