문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Fonts ======
<WRAP left notice 80%>
  * description : CSS Font, Font-family, web safe, style, size, Google, Pairings, Shorthand
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-08
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====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 사용법======
<head> 섹션에 스타일 시트 링크를 추가하고, CSS에서 해당 폰트를 참조합니다.\\
\\
====예제====
Google Fonts중에서 "sofia" 폰트를 사용하는 예제입니다.\\
<code html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
</code>
\\
====예제====
Google Fonts중에서 "Trirong" 폰트를 사용하는 예제입니다.\\
<code html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>
</code>
\\
====예제====
Google Fonts중에서 "Audiowide" 폰트를 사용하는 예제입니다.\\
<code html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
</code>
\\
**Note:**\\
CSS에서 폰트를 지정할 때, 예상치 못한 동작을 방지하기 위해 항상 최소 하나의 예비 폰트를 목록에 삽입합니다. 그래서 마찬가지로 목록의 마지막에 serif나 sans-serif 같은 범용 글꼴 집합을 추가해야 합니다.\\
\\
\\
======Use Muliple Google Fonts (여러 개의 구글 폰트를 사용하기)======
여러 개의 구글 폰트를 사용하기 위해, a pipe character (**|**)를 사용하여 폰트 이름을 구분합니다.\\
====예제====
<code css>
<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>
</code>
\\
**Note:**\\
여러 개의 폰트를 요청하는 것은 웹 페이지를 느리게 할 수도 있으나, 신중히 사용합니다.\\
\\
\\
======Styling Google fonts (구글 폰트 스타일링하기)======
CSS를 사용하여 구글 폰트를 스타일링할 수 있습니다.\\
====예제====
<code 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>
</code>
\\
\\
======Enabling Font Effects (폰트 효과 사용하기)======
구글은 사용할 수 있는 다양한 폰트 효과를 가지고 있습니다.\\
\\
우선 ''effect=effectname''를 구글 API에 추가하고, 특수 효과를 사용할 해당 요소에 특별한 클래스 이름을 추가합니다.\\
클래스 이름은 항상 ''font-effect-''로 시작하고 ''effectname''으로 끝납니다.\\
====예제====
"Sofia" 폰트에 fire 효과 추가하기\\
<code css>
<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>
</code>
\\
====예제====
여러 개의 폰트 효과를 요청하기 위해, a pipe character (**|**)를 사용하여 폰트 효과 이름을 구분합니다.\\
<code css>
<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>
</code>






{{tag>오션, CSS google fonts }}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
