소개
CSS3의 @font-face 기능을 사용하면 웹에서 액세스 가능하고 조작 가능하며 확장 가능한 방식으로 사용자 지정 서체를 사용할 수 있습니다. 그러나 'Cufon, sIFR을 사용하고 이미지에 텍스트를 사용하는 경우 @font-face를 사용하는 이유는 무엇인가요?'라고 말할 수 있습니다. 맞춤 글꼴에 @font-face를 활용할 때의 이점은 다음과 같습니다.
- 찾기별 전체 검색 가능 여부 (
ctrl-F
) - 스크린 리더와 같은 보조 기술에 대한 접근성
- 브라우저 내 번역 또는 번역 서비스를 통해 텍스트 번역 가능
- CSS에는
line-height
,letter-spacing
,text-shadow
,text-align
, 선택기(예:::first-letter
,::first-line
) 등 서체 표시를 조정할 수 있는 완전한 기능이 있습니다.
@font-face 본질
가장 기본적인 수준에서, 우리는 다음과 같이 사용할 새로운 맞춤 원격 글꼴을 선언합니다.
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
그런 다음 다음과 같이 사용합니다.
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
이 @font-face 선언에서는 font-family
속성을 사용하여 글꼴 이름을 명시적으로 지정합니다. 글꼴의 실제 명칭과 관계없이 무엇이든 될 수 있습니다. font-family: 'SuperDuperComicSans';
는 잘 작동하지만 내 평판에 적합하지 않을 수 있습니다. src
속성에서 브라우저가 글꼴 애셋을 찾을 수 있는 위치를 가리킵니다. 브라우저에 따라 유효한 글꼴 유형으로는 eot, ttf, otf, svg 또는 전체 글꼴 데이터를 인라인으로 삽입하는 데이터 URI가 있습니다.
otf 및 ttf | svg | woff | EOT | |
---|---|---|---|---|
IE | IE9 | IE9 | Internet Explorer 5 이상 | |
Firefox | FF3.5 | FF3.5 | FF3.6 | |
Chrome | 크롬 4 | Chrome 0.3 | Chrome 5 | |
Safari | 3.1 | 3.1 | ||
오페라 | Opera 10.00 | 오페라 9 | ||
iOS | iOS 1 | |||
Android | 2.2 |
물론, 그렇게 간단한 것은 절대 아닙니다. 위 코드의 초기 제한사항은 IE 6~8에 EOT를 제공하지 않았다는 점입니다. bulletproof @font-face 구문은 이 문제를 해결하는 방법을 제안했습니다. 강력한 버전도 다음과 같습니다.
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}
아직 두통이 있나요? 빠르게 시작하고 싶은 경우 Font Squirrel 생성기를 사용해 보세요. 이 도구는 전체 프로세스를 간소화하여 글꼴을 가져와서 변형과 CSS를 자동으로 만들어 줍니다. 오늘날 웹 글꼴을 실제로 적용하는 데 필수적입니다.
모바일 지원 여부
모바일 Safari는 iOS 3.1부터 SVG 웹 글꼴을 지원하고 Android는 버전 2.2부터 otf/ttf를 지원합니다. 그렇다면 모바일 사용자에게도 이렇게 향상된 타이포그래피 환경이 제공되어야 할까요? 사용하지 않는 것이 좋습니다. 주된 이유는 WebKit이 @font-face를 통해 맞춤 글꼴을 기다리는 텍스트를 처리하는 방식 때문입니다. 텍스트는 표시되지 않습니다. 따라서 대역폭이 낮은 모바일 연결에서는 최대 50, 000개의 글꼴 데이터가 로드될 때까지 사용자에게 텍스트가 전혀 표시되지 않습니다. Webkit팀에서는 몇 초가 지나면 대체 글꼴을 사용 설정하는 솔루션을 찾고 있지만, 이 기능이 지원되기 전까지는 사용자를 콘텐츠와 콘텐츠 사이에 막는 것은 공정하다고 생각하지 않습니다.
웹폰트 서비스
많은 서비스가 간편한 API에 @font-face 기능을 래핑합니다. 이 기능을 사용하면 단일 CSS 또는 스크립트 행을 HTML 및 일부 구성에 추가하면 모든 작업이 완료됩니다. WebInk, Typekit, Fontslive와 같은 여러 서비스에서 월간 요금을 지불하고 글꼴을 사용할 수 있습니다 (경우에 따라 대역폭 한도까지도 가능). 이러한 서비스를 사용하면 브라우저 간 솔루션 제공에 따른 일부 복잡성을 분산하여 일반 개발자에게 매우 편리합니다.
Google Font API를 사용하면 스타일시트에 연결하고 Google에서 브라우저 간 브라우저 및 성능 문제를 처리하도록 함으로써 무료로 선별된 소규모의 무료 라이선스 글꼴을 사용할 수 있습니다. 이는 웹폰트를 사용하여 순조롭게 시작하고 실행하는 가장 빠른 방법입니다.
전문적인 @font-face용 서체 찾기
디자이너들이 흔히 겪는 놀라운 점은 그래픽 디자인 등에 사용하기 위해 글꼴 라이선스를 구입했다고 해서 @font-face에서 사용할 수 있다는 의미는 아니라는 점입니다. @font-face (또는 웹 삽입) 라이선스는 일반적으로 별도로 판매됩니다. 계약서를 주의 깊게 읽고 궁금한 점이 있으면 언제든지 글꼴 파운드리에 문의하세요. Fontspring은 수백 가지 고급 전문 글꼴을 판매하는 글꼴 부티크로, 모두 @font-face와 함께 사용할 수 있도록 사용이 허가되었습니다. FontFont 및 기타 파운더리에서는 @font-face 라이선스를 직접 판매하기 시작했지만, 현재는 브라우저 시장의 상당 부분은 축소되고 있지만 WOFF와 EOT만 타겟팅하고 있습니다. 많은 파운드리들이 카탈로그에 웹폰트 라이선스를 추가하고 있습니다. 선택한 글꼴에 대한 웹폰트 라이선스를 찾을 수 없다면 해당 업체에 문의하여 문의하세요.
FOUT 처리
Flash of Unstyled Text는 Firefox 및 Opera의 현상으로, 소수의 웹 디자이너가 좋아하지 않습니다. @font-face를 통해 맞춤 서체를 적용하면 페이지를 로드할 때 글꼴이 아직 다운로드 및 적용되지 않은 짧은 순간에 font-family
스택의 다음 글꼴이 사용됩니다. 이로 인해 업그레이드되기 전에 다른 (일반적으로 보기 좋지 않은) 글꼴의 플래시가 발생합니다.
Google Font API와 함께 제공되는 WebFont Loader는 다수의 이벤트 후크를 제공하여 사용자가 많은 로드를 제어할 수 있도록 하는 자바스크립트 라이브러리입니다. 다른 브라우저에서 @font-face 글꼴이 로드되는 동안 대체 텍스트를 숨기는 WebKit의 동작을 모방하도록 하는 방법을 살펴보겠습니다.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['Tagesschrift'],
urls: ['http://paulirish.com/tagesschrift.css']
}
});
</script>
/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
visibility: visible;
font-family: 'Tagesschrift', 'Georgia', serif;
}
JavaScript를 사용 중지하면 텍스트가 내내 계속 표시되며, 글꼴 오류가 있으면 기본 Serif로 안전하게 대체됩니다. 당장은 이를 임시방편으로 생각하세요. 대부분의 웹폰트 전문가들은 2~5초 동안 대체 텍스트를 숨겼다가 다시 드러내고 싶어 합니다. 대역폭이 낮고 휴대기기는 이러한 시간 초과로 인해 큰 이점이 있습니다. 당연히 모질라에서는 조만간 이 문제를 해결하려고 합니다.
더 가볍지만 덜 효과적인 솔루션은 font-size-adjust
속성입니다. 이 속성은 현재 Firefox에서만 지원됩니다. 글꼴 스택에서 x-height를 정규화하여 FOUT에서 눈에 띄는 변화의 양을 줄일 수 있습니다. 실제로 Font Squirrel generator는 업로드하는 글꼴의 x-높이 비율을 알려주는 기능을 방금 추가했습니다. 이제 font-size-adjust
값을 정확하게 설정할 수 있습니다.
요약
웹폰트는 디자이너에게 상당히 자유롭고 자유 합자 및 스타일 대안과 같은 출시 예정인 기능을 통해 훨씬 더 많은 유연성을 제공할 것입니다. 지금은 배포된 브라우저의 98% 를 지원하는 CSS3의 이 부분을 자신 있게 구현할 수 있습니다. 즐거운 시간 되세요.