====== 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.asp|CSS Fonts]]
  * [[https://www.w3schools.com/css/css_font_websafe.asp|CSS Web Safe Fonts]]
  * [[https://www.w3schools.com/css/css_font_fallbacks.asp|CSS Fonts Fallbacks]]
  * [[https://www.w3schools.com/css/css_font_style.asp|CSS Font Style]]
  * [[https://www.w3schools.com/css/css_font_size.asp|CSS Font Size]]
  * [[https://www.w3schools.com/css/css_font_google.asp|CSS Google Fonts]]
  * [[https://www.w3schools.com/css/css_font_pairings.asp|CSS Great Font Parings]]
  * [[https://www.w3schools.com/css/css_font_shorthand.asp|CSS Font Property]]
\\
\\
======CSS Fonts======
웹사이트에 적합한 폰트를 선택하는 것이 중요합니다.\\
\\
=====Font Selection is Important(폰트 선택이 중요합니다)=====
적합한 폰트를 선택하는 것은 사용자의 웹사이트 경험에 커다란 영향을 미칩니다.\\
\\
적합한 폰트는 브랜드에 대한 강렬한 정체성을 만들어줄 수 있습니다.\\
\\
읽기 쉬운 폰트를 사용하는 것이 중요합니다. 폰트는 텍스트에 가치를 부여합니다. 그래서 해당 폰트에 대한 적합한 컬러와 텍스트 크기를 선택하는 것도 중요합니다.\\
\\
=====Generic Font Families (범용 글꼴 집합)=====
CSS에는 5개의 범용 글꼴 집합이 있습니다.\\
  - Serif (세리프) 폰트에는 각 철자의 가장자리에 작은 획이 있습니다. 격식과 우아함을 만듭니다.
  - Sans-serif (쌘 세리프) 폰트에는 매끈한 선이 있습니다(부착된 작은 획이 없습니다). 현대적이고 단순한 모양을 만듭니다.
  - Monospace (모노스페이스) 폰트에서 모든 철자들은 동일한 고정 너비를 가지며, 기계적인 모양을 만듭니다.
  - Cursive (컬씨브) 폰트는 인간의 손글씨를 모방합니다.
  - Fantasy (팬터시) 폰트는 장식적이고 재미있는 폰트입니다.
다른 모든 폰트 이름들은 범용 글꼴 집합들 중의 하나에 속합니다.\\
{{:wiki:css:css_note:serif_and_sansserif_fonts.png?600|}}\\
\\
**Note: **\\
컴퓨터 스크린에서, serif 폰트보다 sans-serif 폰트가 읽기에 더 쉽다고 여겨집니다.\\
\\
==== 폰트 샘플 ====
{{:wiki:css:css_note:font-example.png?600|}}\\
\\
=====CSS font-family 속성=====
CSS에서, 텍스트의 폰트를 지정하기 위해서 ''font-family''속성을 사용합니다.\\
\\
''font-family''속성은 "fallback (대비책)" 시스템으로 여러 개의 폰트 이름을 가져서 브라우저/운영시스템 사이에서 최대한의 호환성을 보장합니다.\\
원하는 폰트로 시작하고 범용 글꼴 집합으로 끝마칩니다.(이용할 수 있는 다른 폰트가 없는 경우, 브라우저가 범용 글꼴 집합에서 유사한 폰트를 선택하도록)\\
폰트 이름은 쉼표(, 콤마)로 구분되어야 합니다.\\
\\
**Note:**\\
폰트 이름이 한 단어 이상인 경우, 쌍따옴표로 표시해야 합니다.ex) "Times New Roman"\\
\\
====예제====
하기 예제에서는 3개의 문단에 대해 일부 다른 폰트를 지정합니다.\\
<code css>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</code>
\\
\\
======CSS Web Safe Fonts======
Web Safe Fonts (웹 안전 폰트)는 모든 브라우저와 자치에 보편적으로 설치되는 폰트입니다.\\
=====Fallback Fonts (예비 폰트)=====
하지만, web safe font가 100% 완전하게 있을 수는 없습니다. 폰트를 찾을 수 없거나 제대로 설치되지 않을 가능성이 항상 존재합니다.\\
\\
그러므로, 항상 fallback 폰트를 사용하는 것이 매우 중요합니다.\\
\\
이는 ''font-family''속성에 유사한 'backup 폰트' 목록을 추가해야 하는 것을 의미합니다. 첫 번째 폰트가 적용되지 않을 경우, 브라우저는 차례로 다음 폰트 적용을 시도합니다. 항상 범용 글꼴 집합 이름으로 목록 명으로 끝내야 합니다.\\
\\
====예제====
하기 예제에는 3가지의 폰트 타입이 있습니다: Tahoma, Verdana, sans-serif. 두 번째(Verdana)와 세 번째(sans-serif) 폰트는 첫 번째 폰트가 발견되지 않을 경우를 대비한 백업(예비) 폰트입니다.\\
<code css>
p {
  font-family: Tahoma, Verdana, sans-serif;
}
</code>
\\
=====Best Web Safe Fonts for HTML and CSS=====
아래의 목록은 HTML과 CSS를 위한 최고의 Web Safe Fonts입니다.\\
  * Arial (sans-serif)
  * Verdana (sans-serif)
  * Helvetica (sans-serif)
  * Tahoma (sans-serif)
  * Trebuchet MS (sans-serif)
  * Times New Roman (serif)
  * Gerogia (serif)
  * Garamond (serif)
  * Courier New (monospace) - monospace: 고정너비의
  * Brush Script MT (cursive) - cursive : 필기체의
\\
**Note:**\\
퍼블리싱을 하기 전에, 항상 사용한 폰트가 다양한 브라우저와 장치에서 어떻게 보여지는지를 확인하고, 항상 fallback 폰트를 사용합니다.\\
\\
상기 10개 폰트의 예제를 [[https://www.w3schools.com/css/css_font_websafe.asp|Best Web Safe Fonts for HTML and CSS]]에서 참조하세요\\
\\
\\
======CSS Font Fallbacks======
5개의 범용 글꼴 집합(Serif, Sans-serif, Monospace, Cursive, Fantasy)으로 구성되고 일반적으로 사용되는 fallback 폰트를\\ 
[[https://www.w3schools.com/css/css_font_fallbacks.asp|CSS Font Fallbacks]]에서 참조하세요.\\
\\
\\
======CSS Font Style=====
''font-style''속성은 이탤릭체의 텍스트를 지정하는 것에 주로 사용됩니다.\\
\\
''font-style''속성은 하기의 세 가지 값을 가집니다.\\
  * normal - 텍스트가 정상적으로 표시됩니다.
  * italic - 텍스트가 이탤릭체로 표시됩니다. 
  * oblique - 텍스트가 기울어져 있습니다. (oblique는 이탤릭과 매우 유사하지만, 지원이 적습니다.)
====예제====
<code css>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</code>
\\
\\
=====Font Weight=====
''font-weight''속성은 폰트의 두께 (weight)를 지정합니다.\\
====예제====
<code css>
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}
</code>
\\
\\
=====Font Variant (폰트 변형)=====
''font-variant''속성은 텍스트가 'small-caps (소대문자(小大文字)) 폰트'로 표시되는 여부를 지정합니다.\\
\\
small-caps 폰트에서, 모든 소문자들은 대문자로 변환됩니다. 하지만, 변환된 대문자들은 기존 텍스트의 대문자보다 더 작은 폰트 크기로 보여집니다.\\
====예제====
<code css>
p.normal {
  font-variant: normal;
{

p.small {
  font-variant: small-caps;
}
</code>
\\
\\
======CSS Font Size (폰트 크기)======
''font-size''속성은 텍스트의 크기를 설정합니다.\\
\\
웹 디자인에서 텍스트 크기를 조절할 수 있는 것은 중요합니다. 하지만, 문단을 제목처럼 보이게 만들거나, 제목을 문단처럼 보이도록 만들기 위해 폰트 크기 조정을 사용하지 말아야 합니다. \\
\\
항상 - 제목에는 <h1>~<h6>, 그리고 문장에는 <p>와 같은 - 적합한 HTML 태그를 사용합니다. \\
\\
폰트 크기 값은 absolute size 또는 relative size가 될 수 있습니다.\\
\\
**Absolute size:**\\
  * 텍스트를 지정 크기로 설정합니다.
  * 사용자가 모든 브라우저에서 텍스크 크기를 변경하도록 허용하지 않습니다.(접근성 이유로 좋지 않습니다)
  * 출력의 물리적 크기를 알고 있는 경우에 유용합니다.
\\
**Relative size:**\\
  * 주위 요소들에 대한 상대적인 크기로 설정합니다. 
  * 사용자가 브라우저에서 텍스트 크기를 변경하도록 허용합니다.
\\
**Note:**\\
폰트 크기를 지정하지 않는 경우, 문장(단락)과 같은 일반 텍스트의 기본 크기는 16px(=1em)입니다.\\
\\
\\
======Set Font Size With Pixels (픽셀로 폰트 크기 설정)======
텍스트 크기를 픽셀로 설정하면, 텍스트 크기룰 완전히 제어할 수 있습니다.\\
====예제====
<code css>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</code>
\\
**Tip: 픽셀 단위 사용 시 줌 툴 (zoom tool)을 사용하여 전체 웹 페이지 크기를 조정할 수 있습니다.**
\\
\\
======Set Font Size With Em (em단위로 폰트 크기 설정하기)======
사용자가 브라우저 메뉴에서 텍스트 크기 조절을 허용하기 위해, 개발자들이 픽셀 대신에 em단위를 사용합니다.\\
\\
1em의 기본 크기는 16px입니다.\\
\\
pixels/16=em 공식을 사용하여 픽셀에서 em으로 사이즈를 계산할 수 있습니다.\\
====예제====
<code css>
h1 {
  font-size: 2.5em;  /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em;  /* 30px/16=1.875em */
}

p {
  font-size: 0.875em;  /* 14px/16=0.875em */
}
</code>
\\
상기 예제에서, em단위의 텍스트 크기는 픽셀 단위의 이전 예제와 동일합니다. 하지만, em 단위를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.\\
\\
하지만, 인터넷 익스플로러의 이전 버번에서는 여전히 문제가 있습니다. 텍스트는 더 크게 만들어졌을 때 보다 더 커지고, 더 작게 만들어졌을 때 보다 더 작아집니다.\\
\\
======Use a Combination of Percent and Em (percent와 em 단위 혼용 사용하기)======
모든 브라우저에서 작동하는 해결책은 <body>요소에서 백분율로 기본 폰트 크기를 설정하고 em단위를 사용하는 것입니다.\\
====예제====
<code html> 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>
</code>
\\
상기 예제는 모든 브라우저에서 동일한 텍스트 크기를 보여주고, 모든 브라우저상에서 텍스트를 zoom하거나 크기를 조절하는 것을 확인할 수 있습니다.\\
\\
\\
======Responsive Font Size (반응형 폰트 크기)======
텍스트 크기는 ''vw (viewport width)''단위로 설정할 수 있습니다.\\
이렇게 하면 텍스트 크기는 브라우저 창의 크기를 따릅니다.\\
====예제====
<code css>
<h1 style="font-size:10vw">Hello World</h1>
</code>
\\
**Note:**\\
**Viewport는 브라우저 창의 크기입니다. 1vw = 1% of viewport width. viewport가 50cm 너비이면, 1vw는 0.5cm입니다.**



 
 




 


















{{tag>오션, CSS Font, Font-family, web safe, style, size, Google, Pairings, Shorthand }}