글꼴과 스타일 설정

🗓 2017년 10월 20일

⏱ 1 분

글을 보기 좋게 만들자. 당장 사이트를 제일 많이 보는 사람은 나일테니 맥/iOS에서 잘 보이는 폰트를 우선 선택했다.

본문을 위한 글꼴은 WhatFont Chrome Extension을 이용해서 facebook의 폰트 설정을 가져왔다.

body,h1, h2, h3, h4, h5, h6, blockquote
  font-family: "SF Optimized", -apple-system, system-ui, ".SFNSText-Regular", sans-serif;

코드를 위한 글꼴은 구글 검색으로 몇 가지 정보를 취합하여 설정했다.

p,pre.highlight, blockquote
  code
    font-family: "Menlo-Regular", "Lucida Console", Monaco, monospace;

인용문을 잘 보이게 하는 스타일도 적용했다.

인용문은 이렇게 보인다.

blockquote
  background: #f9f9f9
  border-left: 10px solid #ccc
  margin: 0px
  padding: 0.5em 10px