이 가이드에서는 Google Fonts API를 사용하여 웹에 글꼴을 추가하는 방법을 설명합니다. 페이지를 참조하세요. 프로그래밍을 할 필요가 없습니다. 맞춤 매개변수를 추가하기만 하면 CSS 스타일에서 글꼴을 참조할 수 있습니다.
간단한 예
예를 들면 다음과 같습니다 다음 HTML을 복사하여 파일에 붙여넣습니다.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
그런 다음 최신 웹브라우저에서 파일을 엽니다. Tangerine 글꼴로 다음과 같이 바꿉니다.
이 문장은 일반 텍스트이므로 CSS를 사용하여 표시되는 방식을 변경할 수 있습니다. 사용해 보기 이전 예의 스타일에 그림자를 추가합니다.
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
이제 텍스트 아래에 그림자가 표시됩니다.
이는 Fonts API와 CSS로 할 수 있는 작업의 시작에 불과합니다.
개요
다음 두 단계만 거치면 Google Fonts API 사용을 시작할 수 있습니다.
원하는 웹 글꼴을 요청하려면 스타일시트 링크를 추가합니다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
요청된 웹 글꼴을 사용하여 요소 스타일을 지정합니다(스타일시트에서 다음 중 한 가지).
.css-selector { font-family: 'Font Name', serif; }
또는 요소 자체에서 인라인 스타일을 사용하여 지정할 수 있습니다.
<div style="font-family: 'Font Name', serif;">Your text</div>
사용할 수 있는 글꼴 목록은 Google Fonts를 참고하세요.
스타일시트 URL에 글꼴 모음 및 스타일 지정
스타일시트 링크에서 사용할 URL을 결정하려면 Fonts API 기본 URL:
https://fonts.googleapis.com/css
그런 다음 하나 이상의 글꼴 모음 이름 및 글꼴 모음과 함께 family= URL 매개변수를 추가합니다.
있습니다.
예를 들어 Inconsolata 글꼴:
https://fonts.googleapis.com/css?family=Inconsolata
여러 글꼴 모음을 요청하려면 파이프 문자로 이름을 구분합니다.
(|)
예를 들어 오렌지색, Inconsolata Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
여러 글꼴을 요청하면 페이지에서 이러한 글꼴을 모두 사용할 수 있습니다. (하지만 너무 많이 사용하지는 마세요. 대부분의 페이지에는 많은 글꼴이 필요하지 않으며 글꼴이 많으면 페이지 로드 속도가 느려질 수 있습니다.)
Google Fonts API는
기본값입니다. 다른 스타일 또는 가중치를 요청하려면:
글꼴, 쉼표로 구분된 스타일 또는 두께 목록 (,)이 표시됩니다.
예를 들면 다음과 같습니다.
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
특정 글꼴에 사용할 수 있는 스타일과 두께를 확인하려면 다음을 참조하세요. Google Fonts에서 글꼴의 목록을 확인할 수 있습니다.
요청한 각 스타일에 대해 전체 이름 또는 축약형 가중치의 경우 숫자 가중치를 지정할 수도 있습니다.
| 스타일 | 지정자 |
|---|---|
| 기울임꼴 | italic 또는 i |
| 굵게 | bold 또는 b 또는 숫자 가중치(예: 700) |
| 굵은 기울임꼴 | bolditalic 또는 bi |
예를 들어 칸타렐 기울임꼴과 드로이드 Serif 굵게를 요청하려면 아무거나 다음 URL 중 하나:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
글꼴 표시 사용
font-display를 사용하면
글꼴을 사용할 수 없는 동안 발생하는 상황을 제어합니다. 기타 값 지정
보통 기본 auto를 사용하는 것이 적합합니다.
querystring display 매개변수에 원하는 값을 전달합니다.
https://fonts.googleapis.com/css?family=Roboto&display=swap
스크립트 하위 집합 지정
Google Font Directory에 있는 일부 글꼴 여러 개의 스크립트 (예: 라틴어, 키릴 문자 및 그리스어)를 지원해야 합니다. 순서 다운로드할 하위 집합을 지정하기 위해 하위 집합 매개변수는 URL에 추가됩니다.
예를 들어 Roboto Mono 글꼴을 사용하는 경우 URL은 다음과 같습니다. 다음과 같아야 합니다.
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
다음 구문의 그리스어 하위 집합을 요청하려면 Roboto Mono 글꼴을 사용하는 경우 URL은 다음과 같습니다. 다음과 같아야 합니다.
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
다음 명령의 그리스어와 키릴 문자 하위 집합을 모두 요청하려면 Roboto Mono 글꼴을 사용하는 경우 URL은 다음과 같습니다. 다음과 같아야 합니다.
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
라틴어 하위 집합은 사용 가능한 경우 항상 포함되며 지정할 필요가 없습니다. 클라이언트 브라우저가 유니코드 범위를 지원하는 경우 (http://caniuse.com/#feat=font-unicode-range) 하위 집합 매개변수는 무시됩니다. 브라우저가 하위 집합 중에서 텍스트를 렌더링하는 데 필요한 것을 얻을 수 있습니다.
사용 가능한 글꼴 및 글꼴 하위 집합의 전체 목록은 Google 글꼴
글꼴 요청 최적화
웹사이트나 애플리케이션에서 웹 글꼴을 사용하고자 할 때 어떤 글자가 필요할지 미리 알 수 있습니다. 이러한 문제는 주로 웹 글꼴을 로고 또는 제목에 사용할 수 있습니다.
이 경우 글꼴에 text= 값을 지정하는 것이 좋습니다.
요청 URL을 지정합니다. 이렇게 하면 Google이
합니다. 경우에 따라 글꼴 파일의 크기가 최대 90%까지 줄어들 수 있습니다.
이 기능을 사용하려면 Google Fonts API 요청에 text=를 추가하기만 하면 됩니다. 대상
예를 들어 블로그 제목에 Inconsolata만 사용하는 경우
제목 자체를 text=의 값으로 사용합니다. 요청은 다음과 같이 표시됩니다.
예를 들면 다음과 같습니다.
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
모든 쿼리 문자열과 마찬가지로 값을 URL 인코딩해야 합니다.
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
이 기능은 국제 글꼴에서도 작동하므로 UTF-8을 지정할 수 있습니다. 있습니다. 예를 들어 ¡Hola! 다음과 같이 표현됩니다.
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
글꼴 효과 사용 설정 (베타)
웹사이트에 머리글이나 디스플레이 텍스트를 만들 때 텍스트를 꾸밀 수 있습니다. Google은 업무를 간소화하기 위해 최소한의 노력으로 사용할 수 있는 글꼴 효과 모음을 제공했습니다. 만들 수 있습니다. 예를 들면 다음과 같습니다.
이 베타 기능을 사용하려면 Google Fonts에 effect=을(를) 추가하세요.
API 요청과 해당 클래스 이름을 필요한 HTML 요소에
영향을 줄 수 있습니다. 위의 예에서는 shadow-multiple 글꼴 효과를 사용했습니다.
요청은 다음과 같습니다.
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
효과를 사용하려면 상응하는 클래스 이름을 HTML 요소에 추가합니다. 이
해당하는 클래스 이름은 항상 font-effect- 접두사가 붙은 효과 이름입니다.
따라서 shadow-multiple의 클래스 이름은 font-effect-shadow-multiple이 됩니다.
<div class="font-effect-shadow-multiple">This is a font effect!</div>
효과 이름을 파이프로 구분하여 여러 효과를 요청할 수 있습니다.
문자 (|)를 입력합니다.
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
다음은 Google에서 제공하는 모든 글꼴 효과의 전체 목록입니다.
| 효과 | API 이름 | 클래스 이름 | 지원 |
|---|---|---|---|
| 애너글리프 | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
| 벽돌 간판 | brick-sign |
font-effect-brick-sign |
크롬, Safari |
| 캔버스 인화 | canvas-print |
font-effect-canvas-print |
크롬, Safari |
| 장난감 | crackle |
font-effect-crackle |
크롬, Safari |
decaying |
font-effect-decaying |
크롬, Safari | |
| 파괴 | destruction |
font-effect-destruction |
크롬, Safari |
| 고통스러운 느낌 | distressed |
font-effect-distressed |
크롬, Safari |
| 고장난 목재 | distressed-wood |
font-effect-distressed-wood |
크롬, Safari |
| 양각 | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
| 소방 | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
| 불 애니메이션 | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
| 취약성 | fragile |
font-effect-fragile |
크롬, Safari |
| 그래스 | grass |
font-effect-grass |
크롬, Safari |
| 얼음 | ice |
font-effect-ice |
크롬, Safari |
| 유타 분열 | mitosis |
font-effect-mitosis |
크롬, Safari |
| 네온 | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
| 윤곽선 | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
| 친환경 | putting-green |
font-effect-putting-green |
크롬, Safari |
| 스커프 스틸 | scuffed-steel |
font-effect-scuffed-steel |
크롬, Safari |
| 섀도 멀티플 | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
| 분절됨 | splintered |
font-effect-splintered |
크롬, Safari |
| 고정 | static |
font-effect-static |
크롬, Safari |
| Stonewash | stonewash |
font-effect-stonewash |
크롬, Safari |
| 3차원 | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
| 3차원 부동 소수점 수 | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
| 빈티지 | vintage |
font-effect-vintage |
크롬, Safari |
| 배경화면 | wallpaper |
font-effect-wallpaper |
크롬, Safari |
글꼴에 스타일을 지정하는 방법에는 여러 가지가 있으며 여러 가지 방법이 있습니다. 있습니다. 시작을 위한 몇 가지 아이디어를 제공해 드리려고 합니다. 자세한 내용은 Google 검색을 사용해 보세요. 'css text Effects' 및 이미 웹에 있는 아이디어를 검색해 보세요.