font-family: 문자의 글꼴을 지정합니다.
font-family: 'arial';글꼴 크기: 문자별 크기를 지정합니다.
font-size: 10px;font-weight: 문자 두께를 지정합니다.
font-weight: bold;글꼴 스타일: 문자별 경사를 지정합니다.
font-style: italic;
font-variant: 문자 수 작은 대문자로 설정하거나 재설정을 지정하십시오.
font-variant: small-caps;줄 높이: 텍스트의 줄 간격을 지정합니다.
line-height: 1.4;글꼴: 한 줄에 쓰기 위한 표기법입니다.
font: bold 12px/1.4 "arial";색상: 문자 색상을 지정합니다.
color : aqua;문자 간격: 문자별 그들 사이의 공간.
letter-spacing: 2px;
텍스트 장식: 텍스트 장식을 나타냅니다.
text-decoration: underline;텍스트 변환: 텍스트에서 대소문자 구분을 지정합니다.
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-face 규칙을 정의한 후 사용하고자 하는 요소의 글꼴을 사용하면 됩니다.
글꼴 패밀리 속성을 사용하여 웹 글꼴을 지정할 수 있습니다.
h1 {
font-family: 'Noto Sans', sans-serif;
}