Freigeben über

CSS Corner: 전체 글꼴 사용

  • Artikel

여러 브라우저에서 CSS3 @font-face 규칙 및 WOFF 글꼴 패키징 형식을 지원함에 따라 최신 웹 활자는 웹 페이지용 글꼴 사용의 차원을 넘어 그 범위가 확장되어 왔습니다. New Yorker와 같은 유명 잡지는 웹 글꼴을 사용하여 기존 헤드라인의 특성을 유지하려고 하는 반면, 미국 오바마 대통령의 재선 캠프에서는 웹 글꼴 서비스인 Typekit를 사용하여 좀 더 돋보이는 특별한 글꼴로 이미지를 각인시키고 있습니다.

많은 웹 디자이너들이 단 하나의 제약 때문에 전체 글꼴을 사용하지 못하고 있는데 바로 많은 글꼴에 포함되어 있는 매우 다양한 OpenType® 특성에 접근할 수 없다는 이유입니다. 이 OpenType 특성에는 커닝, 위 첨자 및 아래 첨자, 합자 등의 상황적 활자 디자인, 숫자 스타일, 동아시아 대체 문자 모양 및 활자 장식에 대한 접근 등의 기본적 활자 특성을 지원하기 위한 대체 문자 모양과 위치 지정 옵션을 정의합니다.

예를 들어, Gabriola에 내장된 OpenType '스타일 집합'을 사용하면 아래 텍스트를...

스타일 집합을 적용하지 않은 Gabriola 글꼴로 표현한 텍스트 문자열

…다음과 같이 표현할 수 있습니다.

스타일 집합 6을 적용한 Gabriola 글꼴로 표현한 텍스트 문자열

최근 업데이트된 CSS3 글꼴 모듈에는 CSS 내에 이러한 OpenType 특성을 노출시키기 위한 새로운 속성 집합이 포함되었습니다. 이러한 속성은 크게 두 가지 범주로 나눌 수 있습니다.

  • 공통된 OpenType 특성을 특정 속성과 값에 명시적으로 매핑. 예를 들어, font-kerning:normal은 글꼴 내에 인코딩된 커닝 쌍 조정을 적용하고 font-variant-numeric: tabular-nums는 표 형식의 숫자를 지원합니다.
  • font-feature-settings 속성을 이용하면 글꼴이 지원하는 모든 OpenType 특성들에 로우레벨 액세스를 가능하게 합니다. 이는 일반적으로 사용되지 않는 상황에서 고급화된 특성을 이용하기 위한 '탈출구'로서 의도된 측면이 있습니다.

CSS 속성: font-feature-settings

IE10 프리뷰 4에서는 font-feature-settings 속성을 지원합니다. 따라서 앞서 예를 든 Gabriola는 다음과 같이 쓸 수 있습니다.

p#demo {

font-family: Gabriola, cursive;

font-size: 24pt;

-ms-font-feature-settings: "ss06" 1;

}

위의 -ms-font-feature-settings 선언으로 글꼴에서 지원하는 스타일 집합이 적용됩니다(ss06). 이 속성은 문자 모양의 선택 또는 위치 지정의 변화 없이 'normal'의 값을 취하거나 하나 이상의 특성이 쉼표로 분리된 목록 형식을 취합니다. 각 특성에는 4문자 OpenType 특성 태그와 값이 결합됩니다. 위의 예에서 'ss06'는 스타일 집합 6에 대한 OpenType 특성 태그이고, 이 특성을 사용하기 위해서는 1의 값을 할당하면 됩니다.

OpenType 특성 레지스트리는 가능한 태그 목록을 정의합니다(여기에 정리되어 있고 ISO로 표준화되어 있음). 가장 일반적인 몇 가지 예를 들면 다음과 같습니다.

OpenType 태그 지원
kern 커닝
liga 표준 합자
dlig 자유 합자
smcp 작은 대문자
subs 아래 첨자
sups 위 첨자
swsh 장식
ss01, ss02, …, ss20 스타일 집합 1 ~ 20

FontFont OpenType 사용자 가이드의 레이아웃 특성 섹션에 이러한 특성을 비롯하여 여러 가지 유용한 정보가 잘 소개되어 있으므로 참고하기 바랍니다.

보다 일반적인 특성은 on/off 스위치입니다. off 또는 제로의 특성 값은 특성을 해제시키고 on 또는 양의 정수 값은 특성을 활성화시킵니다. 일부 특성의 경우, 양의 정수 값으로 여러 옵션을 이용할 수 있습니다. 장식(swash)이 대표적인 경우입니다. 이 특성에 값이 지정되지 않으면 1의 값이 가정됩니다. 따라서 다음의 모든 선언은 예를 든 Gabriola의 목적과 동일합니다.

-ms-font-feature-settings: "ss06" 1;

-ms-font-feature-settings: "ss06" on;

-ms-font-feature-settings: "ss06";

지원되는 글꼴 특성 찾기

Adobe InDesign 또는 Illustrator와 같은 디자인 도구는 사용자 친화적인 메뉴와 대화 상자를 통해 OpenType 특성을 노출시키고 Word와 같은 워드프로세서는 글꼴 선택 대화 상자를 통해 이러한 특성을 지원하며 글꼴 공급업체는 제품이 지원하는 특성을 명시적으로 나타내는 경우가 많습니다. 이후 블로그 글에서 브라우저를 사용하여 글꼴 특성을 찾는 내용을 다룰 예정입니다. 브라우저에서 OpenType 특성에 대한 접근이 더 용이해지면 글꼴 호스팅 서비스가 이러한 특성을 홍보하고 명시적으로 규정하는 역할을 더욱 많이 할 것으로 생각합니다.

브라우저 지원

font-feature-settings 속성은 현재 Firefox 4+ 및 프리뷰 4를 시작으로 Internet Explorer 10에서 지원됩니다. Firefox와 IE는 초안을 서로 다른 방식으로 구현했기 때문에 허용하는 값의 구문이 다르다는 점에 유의하십시오. 예를 들어, 두 브라우저 모두에서 커닝을 사용하려면 다음이 필요합니다.

-ms-font-feature-settings: "kern" 1;

-moz-font-feature-setting: "kern=1";

–moz-font-feature-settings에 대한 자세한 내용은 -moz-font-feature-settings를 참조하십시오.

CSS3 글꼴은 표준화 과정을 거치는 중이기 때문에 더욱 많은 브라우저에서 font-feature-setttings뿐만 아니라 작성자가 사용하기 쉬운 글꼴 변형 속성과 모듈에 정의된 값에 대한 지원이 추가될 것으로 기대합니다.

또한 이 속성은 @font-face 규칙을 통해 다운로드한 웹 글꼴 또는 이름으로 참조된 로컬 글꼴에 관계 없이 모든 글꼴 집합에 적용된다는 점도 알아두십시오.

데모

IE 테스트 데모 사이트에는 Monotype Imaging, FontFont 및 The Font Bureau에서 제공한 고급 OpenType 특성 데모가 포함되어 있습니다. 이 데모는 최신 글꼴에서 사용할 수 있는 다양한 활자 디자인을 보여줍니다.

특별한 글꼴 없이도 이러한 활자 디자인을 확인할 수 있습니다. Windows 7에는 Calibri, Cambria, Consolas, Gabriola 및 Palatino Linotype을 비롯하여 다양한 OpenType 지원 글꼴이 포함되어 있습니다. Windows 8 개발자 프리뷰에서는 Segoe UI 및 웹 페이지용 글꼴인 Arial, Verdana, Georgia, Times New Roman, Comic Sans 및 Trebuchet에 OpenType 특성이 추가되었습니다.

웹 디자이너에게 웹 글꼴에 포함된 모든 OpenType 특성을 제공하게 되어 매우 기쁘며 웹에서 더욱 다양한 활자 디자인을 볼 수 있기 기대합니다.

—Sylvain Galineau, 프로그램 관리자, Internet Explorer