====== 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==== * [[https://www.w3schools.com/css/css_font_google.asp|CSS Google Fonts]] \\ \\ ======CSS Google Fonts====== HTML 표준 폰트 이외의 것을 사용하려면, Google Fonts를 사용할 수 있습니다.\\ \\ Google Fonts는 무료로 사용할 수 있고, 1000개 이상의 폰트를 선택하여 사용할 수 있습니다. \\ ======Google Fonts 사용법====== 섹션에 스타일 시트 링크를 추가하고, CSS에서 해당 폰트를 참조합니다.\\ \\ ====예제==== Google Fonts중에서 "sofia" 폰트를 사용하는 예제입니다.\\

\\ ====예제==== Google Fonts중에서 "Trirong" 폰트를 사용하는 예제입니다.\\

\\ ====예제==== Google Fonts중에서 "Audiowide" 폰트를 사용하는 예제입니다.\\

\\ **Note:**\\ CSS에서 폰트를 지정할 때, 예상치 못한 동작을 방지하기 위해 항상 최소 하나의 예비 폰트를 목록에 삽입합니다. 그래서 마찬가지로 목록의 마지막에 serif나 sans-serif 같은 범용 글꼴 집합을 추가해야 합니다.\\ \\ \\ ======Use Muliple Google Fonts (여러 개의 구글 폰트를 사용하기)====== 여러 개의 구글 폰트를 사용하기 위해, a pipe character (**|**)를 사용하여 폰트 이름을 구분합니다.\\ ====예제====

\\ **Note:**\\ 여러 개의 폰트를 요청하는 것은 웹 페이지를 느리게 할 수도 있으나, 신중히 사용합니다.\\ \\ \\ ======Styling Google fonts (구글 폰트 스타일링하기)====== CSS를 사용하여 구글 폰트를 스타일링할 수 있습니다.\\ ====예제====

\\ \\ ======Enabling Font Effects (폰트 효과 사용하기)====== 구글은 사용할 수 있는 다양한 폰트 효과를 가지고 있습니다.\\ \\ 우선 ''effect=effectname''를 구글 API에 추가하고, 특수 효과를 사용할 해당 요소에 특별한 클래스 이름을 추가합니다.\\ 클래스 이름은 항상 ''font-effect-''로 시작하고 ''effectname''으로 끝납니다.\\ ====예제==== "Sofia" 폰트에 fire 효과 추가하기\\








Sofia on Fire

\\ ====예제==== 여러 개의 폰트 효과를 요청하기 위해, a pipe character (**|**)를 사용하여 폰트 효과 이름을 구분합니다.\\








Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect