깡뇽

[Front-End] CSS 배우기: Typography 본문

Web/HTML & CSS

[Front-End] CSS 배우기: Typography

깡뇽 2021. 1. 25. 16:09
반응형

- 글꼴 특징

스타일 시트에 지정된 글꼴이 사용자의 컴퓨터에 설치되어 있어야 한다.

서체를 지정하지 않으면 "Times New Roman"이 기본으로 적용된다.

서체의 이름이 둘 이상의 단어로 구성되는 경우 큰 따옴표로 묶어야 한다.

 

- 글꼴 두께

font-weight : 텍스트를 굵게 지정할 수 있다. 숫자로 지정할 경우 100부터 900 사이 숫자 사용.

ex①) font-weight: bold; -> 굵게 / font-weight: normal; -> 보통

ex②) font-weight: 400; -> 기본 굵기 / font-weight: 700; -> 굵게 / font-weight: 300; -> 얇게

 

- 글꼴

font-style : 텍스트를 이탤릭체로 바꿀 수 있다.

ex) font-style: italic;

 

- 단어 간격

word-spacing : 단어 사이의 간격을 조정할 수 있다.

ex) word-spacing: 0.3em; 

 

 

font-size와 관련한 글

developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems

 

font-size - CSS: Cascading Style Sheets | MDN

The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative units, such as em, ex, and so forth. The source for this interactive example is stored in a GitHub repository. If you'd like to c

developer.mozilla.org

- 문자 간격

letter-spacing : 개별 문자 사이의 간격을 조정할 수 있다.

ex) letter-spacing: 0.3em;

 

- 텍스트 변환

text-transform : 대문자와 소문자를 설정할 수 있다.

ex) text-transform: uppercase; -> 대문자 / text-transform: lowercase; -> 소문자

 

- 텍스트 정렬

text-align : 텍스트는 항상 브라우저의 왼쪽에 나타나지만 

ex) text-align: left; -> 왼쪽 정렬 / text-align: center; -> 중앙 정렬 / text-align: right; -> 오른쪽 정렬

 

- 줄 높이

line-height : 텍스트가 포함된 줄의 높이를 설정할 수 있다.

ex①) line-height: 1.5; -> 단위가 없는 숫자(글꼴 크기의 비율로 줄 높이를 계산함)

ex②) line-height: 15px; -> 단위가 지정된 숫자(유효한 CSS 단위임)

 

- 대체 글꼴

ex) font-family: "Arial", "Georgia", serif; -> Arial을 사용할 수 없는 경우, Georgia를 사용. Arial과 Georgia를 사용할 수 없는 경우, 사용자 컴퓨터에 사전 설치된 serif를 사용.

 

- 폰트 연결 1
Google Fonts로 접속 -> 원하는 폰트 클릭 -> Select this style 클릭 -> link 복사 -> html파일에 <head> 안에 붙여 넣기

fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

- 폰트 연결 2

link 복사해서 브라우저에 검색창에 검색 -> lation이라고 구분되어있는 @font-face를 복사 -> CSS파일에 상단에 붙여 넣기

 

- 폰트 연결 3

@font-face { src: url("relative-path") format('format'); }의 형식을 사용. relative-path는 ../fonts/폰트.ttf

ex) Glegoo 글꼴 사용

@font-face {
  font-family: "Glegoo";
  src: url(../fonts/Glegoo-Regular.ttf) format('truetype');
}

 

무료 글꼴 사이트

www.fontsquirrel.com/

 

반응형
저작자표시 비영리 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

[Front-End] CSS 배우기 : Box 모델  (0) 2021.01.31
[Front-End] CSS 배우기 : 꾸미기  (0) 2021.01.27
[Front-End] CSS 배우기 : 색상  (0) 2021.01.24
[Front-End] CSS 배우기 : Semantic CSS  (0) 2021.01.24
[Front-End] Chrome의 DevTools 사용하기  (0) 2021.01.24
'Web/HTML & CSS' Related Articles more