font 속성은 family, boldness, size, style을 정의한다.
Serif체는 가는 선이 있다.
Sans-serif체는 끝이 네모처럼 되어 있다.
Generic Family |
Font Family |
설명 |
Serif |
Times New Roman Georgia |
serif 폰트는 각 문자 끝부분에 작은 선이 있다. |
Sans-serif |
Arial Verdana |
Sans는 없다는 의미이다. 문자 끝 부분에 가는 선이 없다. |
Monospace |
Courier New Lucida Console |
모든 monospace 문자는 같은 너비를 갖는다. |
산세리프체는 세리프체보다 가독성이 좋다.
Font Family
font-family 속성은 fallback 시스템이라고 불리는 여러가지의 폰드가 있어야 한다. 브라우저가 첫 폰트를 지원하지 않을 때 다음 폰트를 시도한다.
원하는 폰트로 시작하고 generic family로 끝내서 브라우저가 다른 폰트들을 이용할 수 없을 때 generic family에서 비슷한 폰트를 집어내도록 한다.
font family가 한 단어 이상인 경우 인용구처럼 써야한다. "Times New Roman"
하나 이상의 font family는 콤마로 구분한다.
p {
font-family: "Times New Roman", Times, serif;
}
Font Style
font-style 속성은 대부분 이탤릭 텍스트를 지정하기 위해 쓰인다.
이 속성은 세가지 값이 있다.
normal : 보통으로 보여짐
italic : 이탤릭체로 보여짐
oblique : 이탤릭체와 비슷한 기울어짐, 잘 지원 안됨
p.italic {
font-style: italic;
}
Font Size
font-size 속성은 문자의 크기를 설정한다.
웹 디자인에서 텍스트 크기를 관리하는 건 중요하다. 그러나 문단을 헤딩처럼 보이게 또는 헤딩을 문단처럼 보이게 폰트 크기를 조절하면 안된다.
헤딩엔 <h1>에서 <h6>까지를 써야하고 문단을 위해서 <p>를 써야한다.
폰트 크기는 절대값 혹은 상대값이 될 수 있다.
절대 크기
특정 크기로 설정, 모든 브라우저에서 문자 크기를 못 바꾸게 함(접근성 안좋음), 출력의 물리적 크기가 알려졌을 때 유용
상대 크기
주변 요소에 상대적으로 크기 설정, 브라우저에서 문자 크기 변경 가능
폰트 크기를 지정하지 않으면 16px
픽셀로 폰트 크기 설정
p {
font-size: 14px;
}
Em으로 폰트 크기 설정
문자 크기를 재설정하는 걸 사용자에게 허용하려면 픽셀 대신 Em을 쓴다.
em 단위는 웹표준에 의해 권장된다.
1em은 현재 폰트 크기와 같다. default는 16px이므로 1em은 16px이다.
em=pixels/16
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
em으로 정한 크기와 px로 정한 크기가 동일할지라도 브라우저상에서 em을 썼을 때 폰트 크기가 적응된다.
퍼센트와 Em 조합
모든 브라우저에서 동작하는 해결책은 <body>에 default 폰트 크기를 설정하는 것이다.
body {
font-size: 100%;
}
p {
font-size: 0.875em;
}
모든 브라우저에서 같은 크기로 보여진다. 줌하거나 크기를 재설정할 수 있다.
Font Weight
font-weight 속성은 폰트의 무게를 지정한다.
p.thick {
font-weight: bold;
}
Responsive Font Size
텍스트 크기는 vw(viewport width) 단위로 설정될 수 있다. 텍스트의 크기가 브라우저 창의 크기를 따른다.
브라우저 창의 크기가 10cm이고 10vw로 설정되면 폰트 크기는 1cm가 된다.
Font Variant
font-variant 속성은 텍스트가 small-caps 폰트로 표시되어야 하는지 아닌지를 지정한다.
모든 소문자가 대문자로 변경되지만 텍스트 상의 기존 대문자보다는 크기가 작다.
My name is Hege Refsnes.
https://www.w3schools.com/css/css_font.asp
'CSS' 카테고리의 다른 글
| CSS Links (0) | 2018.11.03 |
|---|---|
| CSS 아이콘 icon (0) | 2018.11.03 |
| CSS text (0) | 2018.11.01 |
| CSS outline (0) | 2018.11.01 |
| CSS box model (0) | 2018.10.31 |