CoolGuy.otf
블로그 전체가 아니라 페이지에만 적용해보려고
CSS 파일 없이 HTML 코드에다 <style> 속성으로 적어보는중
구글 웹 폰트 사용 코드 원형
<style>
@import url(‘https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap’);
.web-font {
font-family: ‘Nanum Gothic’, 돋움;
}
</style>
<body class=“web-font”>
</body>
눈누 CoolGuy-Medium 웹 폰트 적용 코드
@font-face {
font-family: 'CoolGuy-Medium';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2403@1.0/CoolGuy-Medium.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
되었던 코드
<!DOCTYPE html>
<html lang=“ko”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<style>
@font-face {
font-family: 'CoolGuy-Medium';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2403@1.0/CoolGuy-Medium.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.web-font {
font-family: 'CoolGuy-Medium', sans-serif;
}
</style>
<body>
<h3 class="web-font" data-ke-size="size23"> ˚∆˚ </h3>
</body>
</html>
이 폰트는 재배포가 가능하다고 하여
캐릭터 파일을 여기 올리고 src: url(이 게시글 주소)로 해봤는데
파일 있는지 확인하고 다운로드 시키는게 없어서 안되나
물론 재배포 목적은 아니고 자료를 블로그에 올리고
주소 참조해서 사용이 되는가 해보았는데
이렇게 하면 웹페이지를 클릭하기만 해도
시스템의 정보를 읽고 없는 파일(폰트)을 설치하니
웹서핑시 링크를 마구 클릭하면 위험하다는데
나는 아직도 마구 마구 마구 마구 누르고 있어
인터넷 연결 안했는데
무선 통신인지 시리얼 통신인지 포트 통신인지 소켓인지
무언가로 설치된 프로그램에서 크롬의 버전이 몇인지
윈도우는 업데이트가 되었는지 체킹을 해서
프로그램을 바꾸어 놓는데 그것이 알고싶다
<body> 태그 style에 적으면 문서 전체에 적용
<body style="font-family: 'CoolGuy-Medium'">
이렇게?
웹 폰트 – web font
웹 문서 작성시 문서 안에 글꼴 정보 저장해서 문서를 보려고 페이지를 들어온 사용자 시스템으로 다운로드 시켜 보여주는 방식
web-safe-font
사람들이 쓰는 기기에 높은 확률로 있어 제대로 표시될 수 있는 기본 글꼴
Windows에는 sans-serif, serif
한글 기본 글꼴에는 굴림, 궁서, 돋움, 바탕
그런 것
트루 타입 TrueType
확장자 *.ttf
파일 크기가 너무 큰 특징
웹에 적합한 유형중 가장 자주 사용되는
eot – EmbeddedOpenType
woff – WebOpenFontFormat
웹에서 사용 가능한 폰트는
woff, ttf, otf, eot, svg, svgz
안먹혀서 집에 있던 HTML 책 꺼내봤는데 도움이 되었으
책 팔이 아니고 중고책을 팔긴 하지만
2주 전쯤에 꺼내보고 덮어놨는데
오늘 도움이 되어서 책에서 본거 기록
- HTML5 + CSS3 웹 표준의 정석 전면 개정 2판
– 코딩 왕초보도 이 한 권이면 기초부터 활용까지 완전 정복!
Do it ! HTML5 & CSS3 Bible for beginners - 이지스 퍼블리싱(주) / 고경희 / 이지연
www.easyspub.com - 이지스 퍼블리싱 자료실 회원가입, 로그인시 무료
www.easyspub.co.kr - 저자 깃허브
github.com/funnycom/html5-css3 - Do it! html5 카페
cafe.naver.com/doithtml5
cafe.naver.com/doitstudyroom - ISBN 979-11-6303-129-1 13000
- 개정 2판 2쇄 2020년 2월 28일 버전
- ₩25,000
'컴콤캄 > 자료' 카테고리의 다른 글
| A5 6공 바인더 펀칭홀 4mm 사각형 리필 속지 (0) | 2024.07.01 |
|---|