웹 페이지에서 사용자 정의 글꼴 사용
텍스트 콘텐트는 항상 웹 사이트의 중요한 부분 이었지만, 웹 초창기에는 디자이너와 개발자가 자신의 웹 페이지에서 인쇄체 컨트롤 에있어 제한적이었습니다. 여기에는 사이트에서 안정적으로 사용할 수있는 글꼴의 제한이 포함되었습니다. 과거에 언급 한 "웹 안전 글꼴"이라는 용어를 들었을 가능성이 큽니다. 이것은 사람의 컴퓨터에 포함될 확률이 높은 작은 글꼴 집합을 의미합니다. 즉, 사이트에이 글꼴 중 하나를 사용하면 사람의 브라우저에서 올바르게 렌더링된다는 것이 확실합니다.
오늘날 웹 전문가는 작업 할 새로운 글꼴 및 유형 옵션을 보유하고 있으며 그 중 하나는 WOFF 형식입니다.
WOFF 란 무엇인가?
WOFF는 "Web Open Font Format"의 약자로 CSS @ font-face 속성과 함께 사용하기 위해 글꼴을 압축하는 데 사용됩니다. 웹 페이지에 글꼴을 포함시키는 방법으로, 앞서 언급 한 웹 안전 글꼴 중 일부인 전형적인 "Arial, Times New Roman, Georgia"이상의 특수 글꼴을 사용할 수 있습니다.
WOFF는 웹 페이지 용 글꼴 패키징 표준으로 W3C에 제출되었습니다. 2010 년 11 월 16 일에 작업 초안이되었습니다. 오늘날 우리는 WOFF 2.0을 사용하여 첫 번째 버전의 압축을 거의 30 % 향상시킵니다. 어떤 경우에는 이러한 절감액이 훨씬 더 크게 나타날 수 있습니다!
왜 WOFF를 사용합니까?
WOFF 형식을 통해 제공되는 것을 포함하여 웹 글꼴은 다른 글꼴 선택보다 많은 이점을 제공합니다. 그 웹 안전 글꼴이 유용했듯이, 아직도 우리 글꼴에는 그 글꼴을위한 장소가 여전히 있습니다. 우리의 선택을 확장하고 활판 인쇄 옵션을 열어주는 것도 좋습니다.
WOFF 글꼴에는 다음과 같은 이점이 있습니다.
- 이미지보다 글꼴에 더 액세스 할 수 있습니다. WOFF는 CSS로 평범한 HTML 텍스트를 만듭니다. 이미지가 허용하지 않는 접근성과 디자인 제어 기능을 제공합니다.
- WOFF 파일은 컨텍스트 양식 및 구식 숫자와 같은 인쇄 정보를 포함합니다. 근사치가 아닌 올바른 문자를 사용하기 때문에 웹 페이지의 인쇄 기능이 향상됩니다.
- WOFF 글꼴은 다른 언어의 문자로 글꼴을 포함 할 수 있기 때문에 국제화에 도움이 될 수 있습니다.
- 모든 CSS 스타일 텍스트와 마찬가지로 WOFF로 스타일이 지정된 글꼴은 검색 엔진에 더욱 친숙합니다. 검색 엔진은 이미지에 포함 된 텍스트를 '볼'수 없으며 ALT 텍스트가 도움이되지만 텍스트 자체를 대체 할 수는 없습니다.
- WOFF 글꼴은 압축되어 있으므로 다른 유형의 글꼴 파일보다 작습니다. 이렇게하면 사이트 다운로드 속도와 전체 성능에 도움이됩니다.
- 기업 글꼴을 WOFF 파일로 포함하여 WOFF 파일을 사용하여 브랜드 정체성을 보존 할 수 있습니다.
WOFF 브라우저 지원
WOFF는 최신 브라우저에서 다음과 같은 뛰어난 브라우저 지원을 제공합니다.
- Chrome 6 이상
- Firefox 3.6 이상
- Internet Explorer 9 이상
- Opera 11.1 이상
- Safari 5.1 이상
Opera Mini의 모든 버전을 제외하고는 근본적으로 전 반적으로 지원됩니다.
WOFF 글꼴을 사용하는 방법
WOFF 파일을 사용하려면 웹 서버에 WOFF 파일을 업로드하고 @ font-face 속성을 가진 이름을 지정한 다음 CSS에서 글꼴을 호출해야합니다. 예 :
- myWoffFont.woff라는 글꼴을 웹 서버의 / fonts 디렉토리에 업로드합니다.
- CSS 파일에서 @ font-face 섹션을 추가하십시오.
@ font-face {
font-family : myWoffFont;
src : url ( '/ fonts / myWoffFont.woff') 형식 ( 'woff');
}
- 다른 글꼴 이름처럼 CSS 글꼴 스택에 새 글꼴 이름 (myWoffFont)을 추가하십시오.
p {
font-family : myWoffFont , 제네바, Arial, Helvetica, sans-serif;
}
WOFF 글꼴을 얻을 수있는 곳
상업 및 비상업적 용도로 무료 인 WOFF 글꼴을 많이 볼 수있는 두 곳이 있습니다.
- 글꼴 라이브러리 열기
- 글꼴 다람쥐
WOFF 형식에서 사용할 수없는 글꼴을 사용할 수있는 라이센스가있는 경우 Font Squirrel과 같은 WOFF 작성자를 사용하여 글꼴 파일을 WOFF 파일로 변환 할 수 있습니다. Macintosh 및 Windows에서 TrueType / OpenType 글꼴을 WOFF로 변환 할 수있는 sfnt2woff라는 명령 줄 도구도 있습니다.
시스템에 적합한 바이너리를 다운로드하고 명령 행 (또는 터미널)에서 실행 한 다음 지시 사항을 따르십시오.
WOFF 예제
다음은 WOFF 파일의 몇 가지 예입니다. 24 시간 후 HTML5의 WOFF 페이지.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 됨 : 7/11/17