[CSS]

[css] font-family 속성

미나미나미 2016. 12. 29. 16:54

font-family : 글꼴 집합?


글꼴들의 우선 순위가 지정하여 font 없을 경우 차선택을 할 수 있도록 유도하는 것.

font-family는 family-name과 generic family로 나누어집니다.



family-name

 

 지정한 폰트가 컴퓨터 시스템에 없을 경우에 시스템이 적절한 폰트를 선택할 수 있도록 대비

 serif(삐침이 있는 명조계), sans-serif(삐침이 없는 고딕계 폰트), monospace(고정폭을 가진 폰트), fantasy(꾸밈계 폰트), cursive(필기체 폰트)로 다섯 종류

 generic -family

 
 font-family에서 우선 순위 높은 글꼴 중 없을 경우 generic family를 선언하면 유사 계열 적절한 폰트로 대체 된다. 예를 font-family :  고딕, sans-serif로 선언한 경우 고딕 없는 경우 sans-serif의 유사 계열 폰트로 적절하게 바꾸어 준다.


■ 구글 무료 폰트 : https://fonts.google.com/


그러면 구글 폰트 요소를 추가하는 방법을 알아보겠습니다.


1. https://fonts.google.com/earlyaccess에서 원하는 폰트를 찾아주세요



2. 원하는 폰트 url를 알아주시고 <head> </head>에 이렇게 추가해주세요 

   (link 하나당 = 1 font)



3. css에서 지정 또는 <head> </head> 부분에 추가해주세요


4. 확인해보겠습니다.

See the Pen Font-family by Nami (@NamuNami) on CodePen.