# font-face

CSS font-face 속성으로 같은 패밀리 폰트 여러개 불러오기
font-face 방식으로 폰트이름을 하나로 하고 여러개의 스타일을 표현하기아래와 같이 font-family의 명은 동일하게 한다. src파일 마다 weight값을 지정해서 여러개의 @font-face를 작성한다.전체에 한 폰트 패밀리를 적용한다.원하는 weight로

TIL / CSS 기초 : 단위(px, em, rem), CSS 레이아웃 구성 방법(flex, grid), font-face
< 2023.02.17 TIL > 1. 단위 - px, em, rem 2. CSS 레이아웃 구성 방법 - flex, grid 3. font-face
폰트 사용
@font-face 를 사용해서 웹 페이지의 텍스트에 온라인 폰트 (online fonts)를 적용할 수 있다. @font-face를 사용해서 디자이너가 원하는 폰트를 사용할 수 있게 함으로써, 컴퓨터에 설치된 폰트로만 사용해야 했던 제약이 없어지게 되었다!아래 예제에
서버 웹폰트 적용 @font-face
log 2015. 5. 1. 11:28파일 : NanumGothic.eot, NanumGothic.woff 경로 : fonts/NanumGothic.eot, fonts/NanumGothic.woff 시스템 글꼴이 없는 경우 IE6~9 브라우저에서 eot형식외에 woff

web font
기본형 @font-face { font-family: 글꼴 이름; src: url(글꼴파일경로) format(파일유형); }ttf 폰트를 eot파일과 woff파일로 변환ttf 파일은 다른 형식의 파일보다 용량이 크기 때문에 대부분읭 모던 브라우저에서 지원
.gif)
node cli 로 @font-face generator 만들기 - 2
저번에 폰트 파일을 바탕으로 font-face CSS 파일을 만들어주는 간단한 node cli 를 개발하는 과정을 포스팅 했었는데 이제는 이를 npm 에 올리고, github actions 을 통해 자동 배포를 하는 방법을 포스팅 해보려고 한다.node cli 로 @f
.gif)
node cli 로 @font-face generator 만들기 - 1
오랜만에 글을 쓰게 되었는데 요즘 일이 너무 바빠서 개인 프로젝트 할 시간이 없었다 (핑계...)무튼 사실 개인프로젝트 뭐할지 생각도 안나고, 마땅히 끌리는게 없어서 안하게 되고 그러다보니 자연스럽게 글도 안쓰게 되는것 같았다.그러던 중 폰트 작업을 할 일이 생겼다.
[css] font-face 동작 순서
프로젝트 말미에 font에 관련해서 골머리를 싸매게 되었다. 그냥 다운 받아서 local에 넣어가지고 쓰는데 문제는 safari... 왜 브라우저가 여러개야! (IE 지원 고려 안하는 걸 다행으로 생각해야지)아무튼 font-face의 사용법을 정리할 필요성을 느껴서 한

CSS에 폰트 적용하기 (웹폰트 & 폰트 파일)
눈누, Google Fonts 등에서 웹폰트 주소를 복사해서 사용한다적용적용파일을 다운받은 후 프로젝트 디렉토리에 복사한다url 자리에 해당 폰트 파일의 경로 기입font-family이름은 원하는대로 지정적용
CSS3111: @font-face encountered unknown error.
CSS3111: @font-face encountered unknown error. https://www.jsdelivr.com/ @font-face에 알 수 없는 오류가 발생했습니다 IE11에서 이러한 에러가 났다. 네이버에서 제공하는 '나눔바른고딕'을 웹폰트로
웹 폰트 최적화
웹에서 제공되는 정보의 95% 이상은 문어(written language)의 형태입니다. 좋은 타이포그래피는 사용자의 가독성, 접근성, 사용성 등을 사용자 경험을 향상시킬 수 있습니다. 이처럼 웹에서 타이포그래피는 중요합니다.웹 폰트(Web Font)는 디자이너가 원하