로그인 바로가기

중앙 내용으로 바로가기

한국직업전문학교

본문내용

본문

읽을거리
+ Home > 커뮤니티 > 읽을거리
폰트크기 및 단위정리_수료생 신창호 제공
  • 작성자
    관리자
  • 등록일
    2017-03-24 13:09:40
    조회수
    90

 

폰트 css  단위의 호환성은 caniuse.com 에서 확인할 수 있습니다

글꼴의 단위에따른 크기 비교표 http://kukie.net/resources/design/font_size.html

구글 웹 폰트

https://fonts.google.com/earlyaccess

https://fonts.google.com/

폰트파일 변환기

https://onlinefontconverter.com/

 

-----------------------------------------------------------px,pt----------------------------------------------------

 

고정값.

px 컴퓨터1px 점한개 절대값 크기유동적으로 변하지않고 pc버전코딩에서만주로사용

pt는 인쇄용 단위

 

-----------------------------------------------------------rem,em,%-----------------------------------------------

 

http://pxtoem.com/  픽셀을 em단위로 환산해주는곳

em은 현재의 font-size를 정의합니다.

웹문서에서 사용되는단위

상대적인값

body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다.

rem의 "r"은 바로 "root(최상위)"를 뜻합니다. 최상위 태그(요소)에 지정한 것을 기준으로 삼으며

보통 최상위 태그는 html태그입니다.

em·%를 px·pt 사용하듯이 사용하지 않습니다.

px·pt는 어떤 상황에서도 크기가 변하지 않는 절대크기 이지만, em·%는 말 그대로 상대적인 크기 입니다.

브라우저의 기본 글꼴 크기 (1em·100%)는 절대값으로 환산할 경우는 12pt·16px 크기

 

-----------------------------------------------------------vh,vw---------------------------------------------------

 

vh 요소는 높이값의 100분의 1의 단위입니다

vw 요소는 너비값의 100분의 1의 단위입니다

예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 되지요.

그와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다.

모바일전용

 

---------------------------------------------------------vmin,vmax-------------------------------------------------

 

모바일전용

vh와 vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면

vmin과 vmax는 너비값과 높이값에따라 최대, 최소값을 지정할 수 있습니다.

예를 들면 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11px이 됩니다.

너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.

 

---------------------------------------------------------------ex,ch-----------------------------------------------

 

ex와 ch 단위는 현태 폰트와 폰트 사이즈에 의존한다는 점에서 em 그리고 rem과 비슷합니다.

em과 rem과 다른 점은 이 두 단위가 font-family에 의존한다면 다른 두 단위는 폰트의 특정 수치에 기반한다는 점입니다.

ch 단위, 또는 글꼴 단위는 제로 문자인 0의 너비값의 "고급 척도"로 정의됩니다.

기본 컨셉은 monospace 폰트의 N 의 너비값을 부여 받았다는 것이며, width: 40ch;는 40개의 문자열을 포함하고 있다는 뜻입니다.

이 특정 규칙은 점자 레이아웃에 기반하고 있지만, 이 기술의 가능성은 간단한 어플리케이션 그 이상으로 확장할 수 있습니다.

ex 단위의 정의는 "현재 폰트의 x-높이값 또는 em의 절반 값"이라고 할 수 있습니다.

x-높이값은 소문자 x의 높이값이기도 합니다.

폰트의 중간 지점을 알아내기 위해 자주 사용하는 방법입니다.

'x-height'는 각각의 폰트에 따라 그 높이 차이가 있습니다.

1em' = '0.5ex'로 계산을 합니다.

 

 

목록보기
수정하기
삭제하기