폰트
폰트관련 속성은 띄어쓰기를 통해 한번에 지정할 수 있다
순서가 지정되어 있는데, 외우는 건 아님-구글링or w3school사용
font-family :폰트설정
font-size :크기설정
font-style :스타일설정
font-weight :굵기설정
font :위의 것들을 한번에 설정 가능
예시
font: 15px, Arial, sans-serif;
font: italic, small-cpas bold 12px/30px Georgia, serif;
기본제공font보단 웹폰트를 주로 사용한다
웹폰트
구글에서는 웹 폰트를 라이브러리에 저장해 놓고 자유롭게 사용하도록 하고 있다
구글웹폰트 검색
웹폰트 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 웹폰트링크 -->
<!--
<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=Rubik+80s+Fade&display=swap" rel="stylesheet">
-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik+80s+Fade&display=swap');
body,
html {
font-family: 'Rubik 80s Fade', cursive;
font-size: 30px;
font-weight: 300;
}
</style>
</head>
<body>
webfont
</body>
</html>
link태그를 이용할 수도 있고, style에 @import url을 통해 가져올 수도 있다.
가져와서 style안에 font값만 넣어주면 됨
구글폰트 사이트에서 파일을 다운받는 법은 구글링해서 찾아볼 것
'HTML·CSS' 카테고리의 다른 글
| 221220 HTML CSS display (0) | 2022.12.20 |
|---|---|
| 221220 HTML CSS 텍스트와 BORDER (0) | 2022.12.20 |
| 221220 HTML CSS 선택자, 가상선택자 (0) | 2022.12.20 |
| 221220 HTML CSS (0) | 2022.12.20 |
| 221213 HTML VScode 설치와 html태그 (0) | 2022.12.13 |
