CSS 문자 관련 스타일 정리

font-family: 글자의 폰트를 지정합니다.

 font-family: 'arial';

font-size: 글자의 크기를 지정합니다.

font-size: 10px;

font-weight: 글자의  굵기를 지정합니다. 

font-weight: bold;

font-style: 글자의 기울기를 지정합니다.

font-style: italic;

font-variant: 글자의 작은 대문자로 설정하거나 재설정을 지정합니다.

font-variant: small-caps;

line-height: 글자의 줄간격을 지정합니다.

line-height: 1.4;

font:한줄로 쓰는 표기법입니다.

font: bold 12px/1.4 "arial";

color:글자의 색을 지정합니다.

color : aqua;

letter-spacing: 글자의 사이의 간격을 지정합니다.

 letter-spacing: 2px;

text-decoration: 글자의 장식을 지정합니다. 

 text-decoration: underline;

text-transform: 글자의 대소문자 변환을 지정합니다.

text-transform: uppercase;

text-shadow: 글자의 그림자를 지정합니다.

text-shadow : 2px 3px 5px rgba(0,0,0,0.4);

 

웹폰트

웹페이지에서 특정한 폰트를 사용하기 위해 서버에서 다운로드 받아 사용하는 폰트 파일입니다. 이전에는 웹페이지에서 사용하는 폰트는 사용자가 해당 폰트를 설치한 경우에만 볼 수 있었기 때문에, 웹 디자이너들은 제한된 폰트 선택지에서 작업해야 했습니다. 하지만 웹폰트를 사용하면 웹페이지에서 사용하는 폰트를 웹 서버에서 다운로드 받아 보여줄 수 있기 때문에, 다양한 폰트를 선택할 수 있게 되었습니다.웹폰트를 사용하려면 먼저 해당 폰트를 다운로드 받아 웹서버에 업로드해야 합니다. 대부분의 웹폰트는 무료로 제공되는데, 구글 폰트, 네이버 폰트 등이 대표적인 예시입니다. 폰트를 다운로드 받은 후에는 @font-face 규칙을 사용하여 웹폰트를 정의합니다. 이 규칙을 사용하면 웹페이지에서 해당 폰트를 사용할 수 있습니다.

예시

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/NotoSans-Regular.woff2') format('woff2'),
       url('/fonts/NotoSans-Regular.woff') format('woff');
}

위의 예시에서는 Noto Sans라는 웹폰트를 정의하고 있습니다. font-family 속성은 해당 폰트의 이름을 지정하고, font-style과 font-weight 속성은 해당 폰트의 스타일과 굵기를 지정합니다. src 속성은 웹폰트 파일의 경로와 형식을 지정합니다. 이렇게 @font-face 규칙을 정의한 후에는, 폰트를 사용하고 싶은 엘리먼트에 font-family 속성을 사용하여 웹폰트를 지정할 수 있습니다.

h1 {
  font-family: 'Noto Sans', sans-serif;
}