Reference/CSS

font-variation-settings 속성은 가변 폰트를 설정합니다.

by @webs 2022. 12. 10.

font-variation-settings

font-variation-settings 속성은 가변 폰트를 설정합니다. 가변 폰트는 폰트에 따라 지원여부가 다르니, 가변 폰트가 적용되는 폰트를 사용해야 합니다. 가변 폰트란 width(너비), weight(두께), slant(기울기) 등을 자유롭게 표현되는 폰트를 말합니다.

특징	설명
기본값	font-variation-settings : normal
적용	font
버전	CSS3
사용성	★☆☆☆☆

정의(Definition)

font-variation-settings 속성은 가변 폰트를 설정합니다.
가변 폰트란? width(너비), weight(두께), slant(기울기) 등을 자유롭게 표현되는 폰트를 말합니다.

폰트와 관련된 속성

font 속성은 폰트에 관한 설정을 일괄적으로 설정합니다.
font-family 속성은 폰트 종류를 설정합니다.
font-size 속성은 폰트 사이즈 속성을 설정합니다.
font-style 속성은 폰트의 스타일을 설정합니다.
font-weight 속성은 폰트의 두께를 설정합니다.
font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.
font-stretch 속성은 폰트의 장평을 설정합니다.
font-variant 속성은 영문 폰트의 소문자 표시 형태를 설정합니다.
font-variation-settings 속성은 가변 폰트를 설정합니다.
font-feature-settings 속성은 오픈 타입 글꼴의 세부사항을 설정합니다.
font-kerning 속성은 커닝 기능을 사용할 것인지의 여부를 설정합니다.
font-language-override 속성은 설정된 언어에 적합한 글꼴 글리프를 설정합니다.
font-optical-sizing 속성은 텍스트 렌더링을 통해 최적화 여부를 설정합니다.
font-synthesis 속성은 누락된 텍스트의 합성 여부를 설정합니다.
font-palette 속성은 글꼴에 포함된 팔레트를 설정합니다.
@font-face 속성은 웹폰트를 설정합니다.

문법(Syntax)

font-variation-settings : normal | (string number)

/* 기본 속성 */
font-variation-settings: normal;
font-variation-settings: "XHGT" 0.7;

/* 전역 속성 */
font-variation-settings: inherit;   /* 상속 */
font-variation-settings: initial;   /* 초기화 */
font-variation-settings: revert;    /* 원래대로 돌리기 */
font-variation-settings: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
normal	font-variation-settings : normal	가변 폰트를 기본값으로 설정합니다.
string number	font-variation-settings : "XHGT" 0.7	가변폰트 값과 수치를 설정합니다.

예제1(Sample)

font-variation-settings 예제입니다.

font-variation-settings

font-variation-settings: "wght"275, "wdth"50; font-variation-settings: "wght"275, "wdth"60; font-variation-settings: "wght"275, "wdth"70; font-variation-settings: "wght"275, "wdth"80; font-variation-settings: "wght"275, "wdth"90;

font-variation-settings: "wght"250, "wdth"50; font-variation-settings: "wght"300, "wdth"60; font-variation-settings: "wght"350, "wdth"70; font-variation-settings: "wght"400, "wdth"80; font-variation-settings: "wght"450, "wdth"90;

animation: swapthings 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);

HTML

CSS

SCRIPT

<div class="font-box">
    <div class="box">
        font-variation-settings
    </div>
</div>

@font-face {
    font-family: 'Inconsolata';
    src: url('https://ggayane.github.io/css-experiments/Inconsolata-VF.ttf');
    font-weight: 275 900;
    font-stretch: 50% 200%;
}
#sample1 .font-box {
    text-align: center;
    font-family: 'Inconsolata';
}
#sample1 .font-box .box {
    line-height: 1.6;
    font-size: 4vw;
    white-space: nowrap;
    color: hsl(347, 7%, 29%);
    font-variation-settings: "wght"275, "wdth"50;
}
@keyframes swapthings {
    0% {font-variation-settings: "wght"275, "wdth"50;}
    50% {font-variation-settings: "wght"475, "wdth"100;}
    100% {font-variation-settings: "wght"275, "wdth"50;}
}

@media (max-width: 800px){
    #sample1 .font-box {
        flex-direction: column;
    }
    #sample1 .font-box .box {
        width: 100%;
    }
}

document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelectorAll("#sample1 .font-box .box").forEach(box => {
            box.setAttribute("style", text);
        })
    })
});