[리메인] 웹 프로페셔널 강의 학습일지 3

23.07.31 월 3번째 강의 

 

★ 후기 : 선생님은 이번 이론강의가 지루할 수 있다고 하셨는데, 일단 나는 너무 재밌었다. 디자인을 해왔던 사람이 아닌지라 새로운 지식을 할고 가는 것에 대한 기쁨? 재미? 그리고 강의를 정말 잘해주셔서 쏙쏙 기억에 남을 것같다. 블로그에 내용을 다 정리하기 보다는 복습용? 으로 간단하게 작성을하고, 찐 파일이나 내용은 원노트에 저장하는 중!

 

 챕터 03 : 웹 타이포그래피 

 - 서체 출력의 종류와 이해 (시스템 폰트, 이미지 폰트, 웹 폰트)

 - 서체 단위의 개념 (고정단위와 상대단위 ex : px, pt, em, rem)

 

내가 디자인한 폰트가 유저 컴퓨터에 없다면 출력되지 않는 문제를 해결할 방법은 없을까.

→ 기본 폰트를 사용

     (윈도우 : 돋움, 맑은 고딕 등.. 둘중 하나를 선택한다면 맑은고딕! why? 디지털px에 최적화된 글꼴이기 때문)

     (맥 : 애플 sd 고딕네오)

 

→ web font(유저 컴퓨터에 없는 폰트를 브라우저에 출력 하는방법) 사용

 

웹폰트 제작과 사용법

 - 브라우저의 종류 : 브라우저 종류마다 열리는 폰트 확장자가 다르기 때문

 - 웹 폰트 확장자의 종류 : ttf(윈도우, 일반문서용, 힌팅있음, 권장하는 확장자) , otf(맥, 그래픽용,힌팅없음) , eot , woff(otf와 ttf의 구조를 이용한 압축버전, 가장 권장하는 확장자) , woff2 , svg 

힌팅 : 폰트가 작아졌을 때 획이 뭉치는 현상이 없도록 공간을 뚫어서 글자의 획이 올바르게 보일수 있도록 하는 기술

 

 - 웹 폰트 최적화 이유 : 폰트의 용량을 줄이는 것을 최적화 작업이라고 하며, 용량이 적어야 다운로드가 빠름

 

 - 웹 폰트 최적화 방법 : 2,350자(기본 완성형)의 폰트 사용하기, weight (글꼴 두께) 제한해서 사용하기 

 

 - 구글 폰트 플랫폼 

https://fonts.google.com/

Browse Fonts - Google Fonts

 - 영어와 한글 글꼴 따로 출력하기