웹 사이트 개발시 기본 폰트 설정 가이드
조회수 7749회
웹 사이트 폰트 설정시 어떤 방식으로 하는지 궁금합니다.
body { } 태그에만 폰트를 적용하는지,
구글 웹폰트를 불러오는 방식을 사용하는지,
@font-face{
font-family:"Nanum Gothic";
src:url('/fonts/NanumGothic.eot');
src:url('/fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),
url('/fonts/NanumGothic.woff') format('woff'),
url('/fonts/NanumGothic.ttf') format('truetype');
url('/fonts/NanumGothic.svg#NanumGothic') format('svg')
src:local(※), url('/fonts/NanumGothic.woff') format('woff');
}
같이 자신의 서버에서 불러오는 방식도 있다는데, 이런걸 사용하는지.
웹 사이트가 어느 정도 개발된 상태에서 폰트를 적용해서 비교해가며 맞춰보고 싶네요.
폰트 사이즈도 마찬가지입니다. Rem 라는 단위가 있다는데...
기본 폰트와 사이즈를 지정하고, 필요할 때만 부분부분 다른 폰트나 사이즈를 적용하고 싶습니다.
어떤 방식으로 개발하는게 장기적으로도 유지보수에 유리하고, 속도면에서 쾌적하나요???
2 답변
-
직접 웹폰트를 세팅하려면 아래의 블로그가 도움이 되네요. 참고하세요. https://milooy.wordpress.com/2015/08/21/web-font-tutorial/
-
(•́ ✖ •̀)
알 수 없는 사용자
-
-
직접 세팅하려면 방법이 다양합니다. 구글에 검색하시면 많이 나오고요, 쉽게 이해하기위해서 부트스트랩을 사용한다는 가정하에 말해볼게요.
1. 웹서체 사용하기
웹사이트에서 서체를 관리하기 가장 쉬운 방식은 웹서체와 시스템서체를 활용하는것입니다. 화려한디자인을 하는것이 아니라면 기본서체만 사용하고도 서비스를 만드는데 크게 무리는 없을 수 있습니다. (따로 개성있는 디자인이 들어간다면 별도 서체를 사용해야합니다.) 웹서체는 google fonts 및 구글링을 통해서 발견하실 수 있구요. 적용은 css에 아래의 코드를 추가합니다. 예시는 스포카 한 산스와 roboto서체입니다.
/*영문서체*/ @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic"); /*한글서체*/ @import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);더 더 많은 한글웹폰트나 웹폰트에 대한 자세한 내용은 D for Developers 블로그를 참고하세요.
또한 한글의 경우, 시스템 서체의 사용을 권장하는 이유는 window OS에서 일정크기 이하의 작은 글씨들에 서체를 적용하면 가독성이 확떨어져서, 본문글씨나 더 작은 글씨들(
h4이하)은 굴림이나 OS/브라우져에서 지원하는 시스템서체를 사용하길 원합니다.2. css에 서체적용하기
대다수의 경우
body,h1~h6,p테그가 서체의 영향을 받아야하는 테그들입니다. 따라서 이들의 css에 서체를 적용하면됩니다. 부트스트랩의 typography 항목을 참고하세요.따라서, 1차로 css의
body에 서체를 적용하세요.body { font-family: "roboto", "Helvetica Neue", Helvetica, Arial, "맑은 고딕", malgun gothic, "돋움", Dotum, sans-serif; }2차로
h1~h6,p에 각각 필요한 서체를 적용합니다. 예를들어h1,h2,h3만 스포카고딕을 사용하겠다고 하면 아래와같이 해당 클래스만 따로 서체를 지정해줍니다. (css에서h1,h2,h3는body아래에 위치해야합니다.)h1, h2, h3, .h1, .h2, .h3 { font-family: "roboto", "Helvetica Neue", Helvetica, Arial, ‘Spoqa Han Sans’, ‘Spoqa Han Sans JP’, "맑은 고딕", malgun gothic, "돋움", Dotum, sans-serif; }3. rem
만약 부트스트랩 v4(alpha)를 사용중이라면 이미 단위가 rem으로 되어있을 겁니다. 이것을 조금씩 변경해서 크기를 정하길 추천해요. rem에 대해서 더 알아보려면 구글링을 통해서 쉽게 정보를 구할 수 있습니다.
-
(•́ ✖ •̀)
알 수 없는 사용자 -
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
-
댓글 입력