텍스트를 이쁘게 디자인 할 때 쓰입니다.
font-size
글씨의 크기
.text {
font-size: 24px;
}
px, em, rem의 세 가지 단위를 사용합니다.
em (equal to capital m)
- 실제로 적용된 폰트 사이즈가 기준입니다.
- ex) 폰트 사이즈가 12px이라 하면 1em = 12px
그렇지만 폰트 사이즈를 em으로 나타내기엔 조금 불안정한 감이 있습니다.
rem (root em)
- root는 html 문서를 뜻합니다.
- html에 적용된 font-size = 1 rem
line-height
줄 간격을 뜻합니다.
.text {
font-size: 16px;
line-height: 1.5;
}
단위로는 px, em, rem을 사용합니다.
- 줄 간격은 em을 많이 사용하기 때문에 단위를 생략하면 em으로 적용됩니다.
- 줄 간격이 커져도 글씨는 가운데에 배치됩니다.
수직으로 무언가를 정렬할 때 많이 사용됩니다.
font-family
서체입니다.
.text {
font-family: "Poppins";
font-family: "Poppins", sans-serif;
font-family: "Poppins", "Roboto", sans-serif;
}
서체가 여러 종류일 경우, 왼쪽에서 오른쪽 순으로 있는 서체부터 적용됩니다.
font-weight
font의 굵기입니다.
.text {
font-weight: 400;
/* 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 */
}
100 단위로 사용됩니다.
regular: 400
bold: 700
정도를 기억하면 됩니다.
color
글씨의 색상입니다.
.text {
color: #0066ff; /* hex */
color: rgb(0, 102, 255); /* rgb */
color: rgba(0, 102, 255, 1); /* rgba */
}
hex, rgb, rgba의 세 가지 방식으로 표현합니다.
text-align
text를 정렬합니다.
.text {
text-align: left;
/* left | right | center */
}
text-indent
들여쓰기를 합니다.
.text {
text-indent: 50px;
}
text-transform
텍스트를 변화시킵니다. 주로 알파벳에 유효합니다.
.text {
text-transform: capitalize; /*단어의 앞자리를 대문자로 바꿉니다.*/
text-transform: uppercase; /*모두 대문자로 바꿉니다.*/
text-transform: lowercase; /*모두 소문자로 바꿉니다.*/
}
text-decoration
텍스트에 줄을 긋는 것과 관련된 속성입니다.
.text {
text-decoration: none;
/* none | underline | line-through | overline */
}
a 태그의 underline을 없애는 용도로 none을 많이 사용합니다.
font-style
.text {
font-style: normal;
/* normal | italic | oblique */
}
<em>에 기본으로 적용되어 있는 italic을 없앨 때 주로 사용합니다.
webfont
웹에서 제공되는 font를 사용하거나 직접 제공하여 사용합니다.
웹에서 제공되는 font를 사용하면 네트워크에서 리소스를 받아오는 만큼 속도는 로컬보다 느립니다.
https://fonts.google.com/ 에서 font를 찾아볼 수 있습니다.
웹에서 가져오기 - <link>
html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
<p class ="roboto">roboto</p>
css
.roboto{ font-family: 'Roboto', sans-serif;}
웹에서 가져오기 - @import
html
<p class ="roboto">roboto</p>
css
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap');
.roboto {
font-family: 'Roboto', sans-serif;
}
로컬 웹 폰트 적용하기
css
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
font-family와 src를 필히 적어줘야 합니다.
src에는 로컬 폰트 파일의 경로가 들어갑니다.
https://css-tricks.com/snippets/css/using-font-face-in-css/
How to use @font-face in CSS | CSS-Tricks
The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where
css-tricks.com
이 사이트에서 모든 브라우저에 폰트가 적용되게 하려면 어떤 식으로 작성해야하는지 정보를 얻을 수 있습니다.
'CSS' 카테고리의 다른 글
[CSS] Transition & Animation (0) | 2023.07.28 |
---|---|
[CSS] Background (0) | 2023.07.28 |
[CSS] Media Query (0) | 2023.07.27 |
[CSS] Flexbox (0) | 2023.07.27 |
[CSS] Position (0) | 2023.07.27 |