Reference/CSS

font-variant 속성은 글꼴 변형 형태를 일괄적으로 설정합니다.

by @webs 2022. 12. 8.

font-variant

font-variant 속성은 글꼴 변형 형태를 일괄적으로 설정합니다. font-variant 속성은 소문자 폰트를 대문자로 변경해주는 기능만 있었지만, 현재는 다양한 추가 속성 기능이 추가되었습니다. 글꼴에 대한 위치, 변형, 대체 문자, 겹쳤을 때 등 다양한 글꼴 지원을 위한 설정이 현재 개발 중이며, 아직까지 모든 브라우저 및 폰트에 적용되지 않습니다.

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

정의(Definition)

font-variant 속성은 글꼴 변형 형태를 일괄적으로 설정합니다.
font-variant 요소의 small-caps 속성은 소문자의 크기 대신 대문자로 변경해주는 기능입니다.
font-variant 속성은 small-caps 속성 이외에 다양한 속성들이 추가되는 단계이며, 대부분은 구현이 안됩니다. 추후 속성들이 정상화되면 업데이트 됩니다.

font-variant와 관련된 속성

font-variant 속성은 글꼴 변형 형태를 일괄적으로 설정합니다.
font-variant-ligatures 속성은 글꼴 변형 형태 겹쳤을 때 설정합니다.
font-variant-position 속성은 글꼴 변형 형태의 위치를 설정합니다.
font-variant-caps 속성은 소문자/대문자에 대한 글꼴 표시 형태를 설정합니다.
font-variant-numeric 속성은 숫자에 대한 글꼴 표시 형태를 설정합니다.
font-variant-alternates 속성은 글꼴 변형 형태의 대체 형태를 설정합니다.
font-variant-east-asian 속성은 아시아 언어 글꼴 표시 형태를 설정합니다.
font-variant-emoji 속성은 이모지 글꼴 표시 형태를 설정합니다.

폰트와 관련된 속성

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-variant : normal | none | small-caps

/* 기본 속성 */
font-variant: normal;
font-variant: none;
font-variant: small-caps;

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

속성(Property)

속성값	값(예)	설명
normal	font-variant : normal;	글꼴 변형 형태를 기본값으로 설정합니다.
normal	font-variant : none;	글꼴 변형 형태를 설정하지 않습니다.
small-caps	font-variant : small-caps;	소문자 폰트에 대문자 폰트를 설정합니다.

예제1(Sample)

소문자를 대문자 스타일로 변경하는 예제입니다.

원본
Since I was young, I liked to make my own space and I liked my own attic. I hope that even one person will be inspired or moved in the space I created. I don't have a house in Seoul, but I have a lot of my own houses here. The house can be built at any time without cost. I think being able to create my own space is a great attraction for coding. I want to design and design my own dream in one corner and live in the future.

변형
Since I was young, I liked to make my own space and I liked my own attic. I hope that even one person will be inspired or moved in the space I created. I don't have a house in Seoul, but I have a lot of my own houses here. The house can be built at any time without cost. I think being able to create my own space is a great attraction for coding. I want to design and design my own dream in one corner and live in the future.

font-variant: normal; font-variant: none; font-variant: small-caps;

HTML

CSS

SCRIPT

<div class="font-box">
    <div class="box">
        원본 <br>
        Since I was young, I liked to make my own space and I liked my own attic.
        I hope that even one person will be inspired or moved in the space I created.
        I don't have a house in Seoul, but I have a lot of my own houses here.
        The house can be built at any time without cost.
        I think being able to create my own space is a great attraction for coding.
        I want to design and design my own dream in one corner and live in the future.
    </div>
    <div class="box">
        변형 <br>
        Since I was young, I liked to make my own space and I liked my own attic.
        I hope that even one person will be inspired or moved in the space I created.
        I don't have a house in Seoul, but I have a lot of my own houses here.
        The house can be built at any time without cost.
        I think being able to create my own space is a great attraction for coding.
        I want to design and design my own dream in one corner and live in the future.
    </div>
</div>

#sample1 .font-box {
    display: flex;
    justify-content: space-between;
}
#sample1 .font-box .box {
    width: 48%;
    line-height: 1.6;
}

@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);
        })
    })
});