분류 css

CSS에서 웹 글꼴을 사용하는 방법

컨텐츠 정보

  • 조회 648 (작성일 )

본문

웹 글꼴에 대한 기본 지원은 1997 년에 릴리스 된 Internet Explorer 4.0에서 도입되었습니다.


사용자 정의 글꼴은 일반적으로 수백 Kb를 필요로 합니다. 추가 할수록 페이지 가중치가 커지고 페이지 성능은 떨어집니다. 모바일 장치 및 느린 네트워크에서 특히 문제가 될 수 있습니다.

운영 체제 글꼴은 무료로 제공되며 현저한 성능 향상을 제공 할 수 있습니다.

각 플랫폼은 제공하는 글꼴이 다르지만, serif, sans-serif, monospace, 필기체, fantasy 및 system-ui의 일반 글꼴 모음 이름은 물론 fallbacks를 지정할 수 있습니다.


body {

   font-family: Arial, Helvetica, sans-serif;

 }


스택에 스타일 시트에 여러 개의 선언이 필요한 경우 Sass와 같은 CSS 전 처리기를 사용하는 것이 실용적일 수 있습니다.


$font-stack: "Segoe UI",Roboto,Ubuntu,sans-serif; 

body {

   font-family: $font-stack;

 }


CSS 사용자 정의 속성 : 


:root {

   font-stack: "Segoe UI",Roboto,Ubuntu,sans-serif;

 }


 body {

   font-family: var( — font-stack);

 }


또는 로컬 글꼴을 참조하는 @ font-face 선언 : 


@font-face {

   font-family: fontstack;

   font-style: normal;

   font-weight: 300;

   src: local("Segoe UI"),local("Roboto"),local("Ubuntu");

 }


 body {

   font-family: fontstack, sans-serif;

 }


웹 글꼴 저장소 사용 


CDN (Content Delivery Network)에서 제공되는 광범위한 오픈 소스 글꼴을 제공하는 여러 리포지토리.

Google 글꼴은 가장 많이 사용되는 것으로 검색 가능한 목록, 무게 및 스타일 사용자 정의 옵션 및 로드 시간 추정을 제공합니다.


페이지에 글꼴을 포함 시키려면 HTML 헤드에서 표준 <link> 태그를 사용하십시오

예 :


<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


글꼴은 자신의 스타일 시트와 동시에 다운로드되고 처리됩니다.


CSS @import를 사용할 수도 있습니다.


@import url('https://fonts.googleapis.com/css?family=Open+Sans');


그러나 이것은 폰트 스타일이 파싱될 때까지 다른 스타일 시트의 처리를 차단합니다.


웹 글꼴은 다음과 같이 CSS 선언에 설정할 수 있습니다.


body {

   font-family: "Open Sans", sans-serif;

 }


여러 개의 패밀리 요청과 같은 URL API에 대한 추가 최적화가 가능합니다.


https://fonts.googleapis.com/css?family=Inconsolata|Droid+Sans


다른 weights and styles :

https://fonts.googleapis.com/css?family=Inconsolata:500,700 

https://fonts.googleapis.com/css?family=Roboto:bolditalic


자신만의 글꼴 파일 사용하기 

모든 글꼴 파일은 웹 페이지에서 사용할 수 있지만 서체 소유자의 허가를 받았는지 확인하십시오.

최신의 모든 브라우저는 WOFF 형식을 지원합니다.

WOFF2는 일반적인 압축비 30%를 제공하지만 Internet Explorer에서는 지원되지 않습니다. 오래된 응용 프로그램이나 더 모호한 응용 프로그램의 경우 TTF, EOT 또는 SVG가 옵션일 수 있습니다.


Font Squirrel Webfont Generator는 하나 이상의 글꼴을 업로드하고 설정을 조정하고 변환된 글꼴과 CSS 코드가 포함 된 키트를 다운로드하는 간단한 도구를 제공합니다.


기본적으로 WOFF2 글꼴, WOFF 대체 글꼴 및 적절한 CSS @font-face 설정을 제공합니다. 

예 :

@font-face {

   font-family: 'mytypeface';

   src: url('mytypeface-webfont.woff2') format('woff2'),

        url('mytypeface-webfont.woff') format('woff');

   font-weight: normal;

   font-style: normal;

 }

body {

   font-family: mytypeface, serif;

 }







웹 글꼴