목차
CSS Fonts
- description : CSS Font, Font-family, web safe, style, size, Google, Pairings, Shorthand
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-08
Source of the article
CSS Google Fonts
HTML 표준 폰트 이외의 것을 사용하려면, Google Fonts를 사용할 수 있습니다.
Google Fonts는 무료로 사용할 수 있고, 1000개 이상의 폰트를 선택하여 사용할 수 있습니다.
Google Fonts 사용법
<head> 섹션에 스타일 시트 링크를 추가하고, CSS에서 해당 폰트를 참조합니다.
예제
Google Fonts중에서 “sofia” 폰트를 사용하는 예제입니다.
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"> <style> body { font-family: "Sofia", sans-serif; } </style> </head>
예제
Google Fonts중에서 “Trirong” 폰트를 사용하는 예제입니다.
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong"> <style> body { font-family: "Trirong", serif; } </style> </head>
예제
Google Fonts중에서 “Audiowide” 폰트를 사용하는 예제입니다.
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide"> <style> body { font-family: "Audiowide", sans-serif; } </style> </head>
Note:
CSS에서 폰트를 지정할 때, 예상치 못한 동작을 방지하기 위해 항상 최소 하나의 예비 폰트를 목록에 삽입합니다. 그래서 마찬가지로 목록의 마지막에 serif나 sans-serif 같은 범용 글꼴 집합을 추가해야 합니다.
Use Muliple Google Fonts (여러 개의 구글 폰트를 사용하기)
여러 개의 구글 폰트를 사용하기 위해, a pipe character (|)를 사용하여 폰트 이름을 구분합니다.
예제
<head> <link rel+"stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong"> <style> h1.a {font-family: "Audiowide", sans-serif;} h1.b {font-family: "Sofia", sans-serif;} h1.c {font-family: "Trirong", serif;} </style> </head>
Note:
여러 개의 폰트를 요청하는 것은 웹 페이지를 느리게 할 수도 있으나, 신중히 사용합니다.
Styling Google fonts (구글 폰트 스타일링하기)
CSS를 사용하여 구글 폰트를 스타일링할 수 있습니다.
예제
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"> <style> body { font-family: "Sofia", sans-serif; font-size: 30px; text-shadow: 3px 3px 3px #ababab; } </style>
Enabling Font Effects (폰트 효과 사용하기)
구글은 사용할 수 있는 다양한 폰트 효과를 가지고 있습니다.
우선 effect=effectname를 구글 API에 추가하고, 특수 효과를 사용할 해당 요소에 특별한 클래스 이름을 추가합니다.
클래스 이름은 항상 font-effect-로 시작하고 effectname으로 끝납니다.
예제
“Sofia” 폰트에 fire 효과 추가하기
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire"> <style> body { font-family: "Sofia", sans-serif; font-size: 30px; } </style> </head> <body> <h1 clsss="font-effect-fire">Sofia on Fire</h1> </body>
예제
여러 개의 폰트 효과를 요청하기 위해, a pipe character (|)를 사용하여 폰트 효과 이름을 구분합니다.
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple"> <style> body { font-family: "Sofia", sans-serif; font-size: 30px; } </style> </head> <body> <h1 clsss="font-effect-neon">Neon Effect</h1> <h1 clsss="font-effect-outline">Outline Effect</h1> <h1 clsss="font-effect-emboss">Emboss Effect</h1> <h1 clsss="font-effect-shadow-multiple">Multiple Shadow Effect</h1> </body>
