폰트

Jihyun-Jeon·2022년 2월 18일

HTML,CSS

목록 보기

3/34

🔶 font-family :글꼴 설정

🔶 폰트 다운해서 쓰는 법

1. 웹폰트

: 서버에서 폰트를 직접 내려받아 문서에서 사용.
(내 컴터도, 어느 컴터도 그 폰트가 컴퓨터 안에 다운되지 않아도 됨)

<구글폰트>
: 영문 폰트가 많은 사이트

적용방법
1) head에 link 3개 넣고
2) css파일에 font-family복사해서 해당 요소에 적용하기

<눈누>
: 한글폰트가 많은 사이트

적용방법
1)font-face를 css코드에 붙여줌
2)적용시키려는 선택자에 해당 폰트패밀리 프로퍼티 적용.

2. font-face 규칙 이용

: 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게 됨.

: 사용자가 갖고 있지 않은 폰트도 특정 경로로 연결시켜 다운 받아 사용받을 수 있게 정의해 주는 것.

<!DOCTYPE html>
<html lang="en">
<head>
 <style type="text/css">
   
  @font-face{
  	font-family: 'scFont'; /* 1.폰트이름을 맘대로 지음.(scFont)*/
  	src: url(./font/SCDream3.otf); /* 2.다운받은 폰트가 있는 경로를 지정*/
    font-weight: bold;
    font-style: italic;
  	  }

  H3{
  	font-family: "scFont"; /* 3.폰트이름을 갖다 씀*/ }
   
	</style>
</head>
<body>
	<h3>이사철 인테리어 Q&amp;A</h3>
</body>
</html>

🔶 font-size

h1: 이렇게 기본 사이즈가 있는 태그는, 사용자의 브라우저에 설정된 기본 글꼴 사이즈에 비례해서 사이즈가 나옴.

*그래서 사용자마다 크기가 다르게 보일 수 있음
→ 따라서 폰트사이즈를 스타일로 지정해 주는게 좋음.

🔶 text-decoration :글자 꾸미기

none : 데코레이션 줄이 없음(기본값)
underline :밑줄
overline: 글자위에 줄
line-through : 취소선(가운데 줄)

🔶 b,strong :글자를 두껍게

b태그는, 그냥 시각적으로 글자를 두껍게 하는 것.
strong태그는, 시각적으로 글자가 두꺼워질 뿐 아니라 음성리더기가 읽을때 강조하여 소리내어 읽게 됨.(정말로 그 내용의 의미까지 강조하려면 strong태그)

🔶 font-weight

글씨 두께를 설정
400(= normal), 700(= bold)
보통은 두껍거나 or 아니거나 두가지 경우면 되므로, 간편하게 bold 값을 지정합니다.

🔶 i,em :글자가 기울어짐

i태그는, 미적으로 두꺼운 것
em태그는, 정말로 그 내용의 의미까지 강조하게됨.

Jihyun-Jeon

~23.05

이전 포스트

form , input

다음 포스트

폰트