AD

 CTFT 트게더를 위한 CSS 팁 : OpenType 시작하기

Broadcaster 소낙눈
2022-05-03 23:49:08 202 0 0

OpenType 소개

OpenType를 지원하는 폰트의 경우 특정 선언의 삽입을 통해 문자의 표시 스타일을 변경할 수 있습니다.

OpenType 기능은 일부 폰트만 지원하며, 지원하지 않는 폰트에서는 사용할 수 없습니다.


이러한 OpenType을 통해 문자의 표시 스타일을 지정하려면 '오픈타입 피처 태그'의 값을 알고 있어야 합니다.

'피처 태그'에 대한 개념을 확인하려면 MDN 문서 : 피처 태그 값을 참조하세요.



OpenType 사용처

알파벳 O 와 숫자 0 이나, 소문자 l 과 대문자 I 처럼 비슷하게 생겨 구별이 힘든 문자를 위해 사용하는 것이 일반적입니다.

폰트별로 변경할 수 있는 스타일이 조금씩 다르기 때문에 개별적으로 확인하여야 합니다.



구문 사용 방법 #1 : 기본

OpenType 스타일 변형을 사용하기 위한 기본 구문은 다음과 같습니다.


선택자 {

    font-feature-settings: "피처태그";

}



구문 사용 방법 #2 : 전체 페이지

만약 페이지 전체를 대상으로 해당 스타일 변형을 적용하고 싶다면 다음과 같이 작성합니다.


:root {

    font-feature-settings: "피처태그";

}



구문 사용 방법 #3 : 여러 개 넣기

피처 태그는 반드시 따옴표를 통해 감싸 주어야 하며, 콤마를 이용하면 피처 태그를 여러 개 삽입할 수 있습니다.


:root {

    font-feature-settings: "피처태그1", "피처태그2", "피처태그3";

}



주의사항

아무런 피처 태그나 적용시키지 마세요.

일부 피처 태그는 특수한 상황을 위해 사용하도록 구성되어 있습니다.



더 알아보기

Pretendard를 대상으로 하는 OpenType 피처 태그를 확인하려면 프리텐다드 공식 페이지를 참조하세요.


7c9b0966d0b9a15a37894f88824da6ba.png


공식 페이지의 'Opentype 기능' 부분에 있는 "salt" 나 "ss01" 와 같은 값이 피처 태그입니다.

후원댓글 0
댓글 0개  
이전 댓글 더 보기
이 글에 댓글을 달 권한이 없습니다. 로그인해 보세요.
 피드 CSS 트:제로 CIFT CXFT CTFT 그래픽 자유 질문 저장소
0
10-05
0
 저장소
임시 저장 [2]
Broadcaster 소낙눈
09-09
4
08-11
0
08-09
0
 저장소
문서 공통 틀
Broadcaster 소낙눈
08-08
0
 저장소
메모장 4 [7]
Broadcaster 소낙눈
08-07
0
 저장소
메모장 3
Broadcaster 소낙눈
07-31
0
 저장소
메모장 2
Broadcaster 소낙눈
07-21
0
 질문
안녕하세요, 트게더입니다! [4]
Staff 트게더이벤트
06-02
인기글 글 쓰기