홈페이지 폰트 사이즈 수정하기 (font-family,size,weight)

홈페이지의 폰트 제어는 link rel로 html에 외부스크립트로 스타일을 불러와서 링크하는것을 기본으로 원하는 폰트를 적용해 주었다면 css의 스타일로 본문에 적용되는 다양한 폰트들을 상세하게 제어할 수 있습니다. ​ 

 

홈페이지에 적용되는 폰트는 운영체제와 브라우저의 특성을 고려해 하나의 폰트만을 연결해주는 것을 기본으로 잡지 않으며, 첫번째 적용되는 폰트들이 문제가 생길 경우에 순차적으로 적용될 수 있도록 예비폰트들을 지정해 주어야 합니다. 이것을 "폴백 (fallback)시스템"  이라 부릅니다.

 

---

 

font-family 

텍스트의 글꼴을 모아놓은 명령어로 위의 폴백을 염두에 두어 몇개의 폰트를 세팅 해 줍니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도하는 식으로 진행되며, 모든 글꼴을 사용할 수 없는 경우 기본체로 출력합니다.

 

[기본코드]

font-family: family-name, generic-family;

폰트이름을 적고 세리프와 산세리프를 정하는 타입으로 기재하시면 됩니다.

 

p {
  font-family: 'nanum font', 2002, sans-serif;
}

※ 컴퓨터 화면에서 sans-serif 글꼴은 serif 글꼴보다 읽기 쉬운 것으로 간주됩니다. 

※ 이름이 두 단어 이상인 경우 따옴표로 묶어야 처리됩니다. 

(세리프와 산세리프의 차이는 이어 포스팅 처리로 이어 달아놓을 예정입니다.)

반응형

---

 

font-size 

텍스트의 크기를 변경합니다. 제목 글은 크게, 본문 글은 작게, 상세한 조절이 가능해 집니다. 픽셀을 설정으로 사용할 경우 확대/축소의 기능을 지원하게 됩니다.

h1 { font-size: 40px; } 
h2 { font-size: 30px; } 
p { font-size: 14px; }

 

px -> em변환법 

픽셀을 엠으로 변환해 사용하는 방법은 W3C에서 권고하는 사항입니다. 1em은 브라우저에서 기본으로 지원하는 폰트의 크기 16px을 지칭하고 있으며, 변환법은 다음과 같습니다.

 

"pixels / 16 = em"

 

body {
  font-size:100%;
}
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

▲ 위와 같이 백분율과 엠을 섞어 표현하면 완벽하게 모든 브라우저에 동일한 텍스트 크기를 보여주게 끔 세팅됩니다.

 

---

 

font-weight 

폰트의 두께를 결정하는 방법으로, nomal,bold와 같이 영문으로 쓰는 방법과 100~900까지 숫자로 쓰는 방법 크게 두가지로 분류 하며, 대부분 숫자로 사용하는 방법을 통해 제어를 해줍니다. ​

 

[기본코드]

font-weight: normal|bold|bolder|lighter|number;

 

[예시]

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}

 

 

본문 및 이미지 출처: https://www.w3schools.com