CSSFonts(글꼴)

웹에서는 적합한 글꼴을 선택하는 것이 중요합니다.

 

글꼴 예시

 

 

 

font-family

텍스트의 글꼴을 지정합니다.

글꼴 이름이 두 단어 이상인 경우 "Times New Roman"과 같이 따옴표로 묶어야 합니다.

 

 

Web Safe Fonts

웹 안전 글꼴은 모든 브라우저와 장치에 보편적으로 설치되는 글꼴입니다.

 

 

Fallback Fonts(대체 글꼴)

100% 완벽하게 웹에 안전한 글꼴은 없습니다.

따라서 항상 대체 글꼴을 사용하는 것이 매우 중요합니다.

//여기에는 Tahoma, Verdana 및 sans-serif의 세 가지 글꼴 유형이 있습니다. 
두 번째 및 세 번째 글꼴은 첫 번째 글꼴을 찾을 수 없는 경우를 대비한 백업입니다.

p {
font-family: Tahoma, Verdana, sans-serif;
}

 

 

HTML 및 CSS를 위한 최고의 웹 안전 글꼴

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

 

font-style

주로 기울임꼴 텍스트를 지정하는 데 사용됩니다.

p.normal {
  font-style: normal; //텍스트가 정상적으로 표시됩니다.
}

p.italic {
  font-style: italic; // 텍스트가 기울임꼴로 표시됩니다.
}

p.oblique {
  font-style: oblique; // 텍스트가 기울임꼴로 표시 (이텔릭체와 유사하나 덜 기울려짐)
}

 

font-weight

글꼴의 두께를 지정합니다.

p.normal {
  font-weight: normal;  //정상 두께
}

p.thick {
  font-weight: bold; // 두껍고 진한 두께
}

 

 

font-variant속성

텍스트를 small-caps 글꼴로 표시할지 여부를 지정합니다.

p.normal {
  font-variant: normal;
}

//작은 대문자 글꼴에서는 모든 소문자가 대문자로 변환됩니다. 
//그러나 변환된 대문자는 텍스트의 원래 대문자보다 작은 글꼴 크기로 나타납니다.
p.small {
  font-variant: small-caps;
}

 

Font Size

텍스트의 크기를 설정합니다.

font-size 값은 절대 또는 상대 크기일 수 있습니다.

텍스트 크기를 픽셀(px)로 설정하면 텍스트 크기를 완벽하게 제어할 수 있습니다.

사용자가 브라우저 메뉴에서 텍스트 크기를 조정할 수 있도록 많은 개발자는 픽셀 대신 em을 사용합니다.

1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16px입니다. 따라서 1em의 기본 크기는 16px입니다.

반응형 글꼴 크기는 vw(뷰포트 너비)를 의미하는 단위로도 설정이 가능하다.

 

아래 예제는 픽셀로 글자를 설정한다.

 

아래 예제는 em으로 글자로 설정한다.

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 */
}

 

웹에서 글꼴 조작하는 것은 까다로운 문제가 될 수 있다.

이에 대한 해결법은 다음과 같다.

 

모든 브라우저에서 작동하는 솔루션은 <body> 요소의 기본 글꼴 크기를 백분율로 설정하는 것입니다.

즉 body{font-size: 100%}로 기본값을 설정해준다!

모든 브라우저에서 동일한 텍스트 크기를 표시하고

모든 브라우저에서 텍스트를 확대/축소하거나 크기를 조정할 수 있다!

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

 

반응형에 대한 글꼴를 설정할때는 vw를 단위를 쓴다.

뷰포트는 브라우저 창 크기이다.

예를 들어 1vw = 뷰포트 너비의 1%. 뷰포트의 너비가 50cm이면 1vw는 0.5cm입니다.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

 

font 속성 속기방법

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

위에서 부터 순서대로 속성을 기입하여 font 속성을 쓸 수 있다.

font-size 및  font-family 은 필수입니다. 다른 값 중 하나가 누락된 경우 기본값이 사용된다.

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

font 속성을 기입할때 순서와 필수 값을 정확히 입력해 주어야 하기 때문에 실수하기 쉽다..!

 

 

'Web > CSS' 카테고리의 다른 글

CSS 아이콘, 부트 스트랩 아이콘, 구글 아이콘 사용방법  (0) 2023.01.27
Google Fonts (구글 글꼴)  (0) 2023.01.27
CSS selector  (0) 2023.01.06
CSS 기본 기능 정리 1 ( background ~ text )  (0) 2023.01.04
CSS 개념  (0) 2023.01.02

+ Recent posts

티스토리툴바