@font-face - CSS: Cascading Style Sheets | MDN
MDN Web Docs
웹 폰트 최적화: local 함수 활용하기
CSS에서 웹 폰트를 적용할때 @font-face 속성을 활용하는데요. 이 속성을 통해 로컬 폰트와 웹 폰트 두 가지 방식으로 폰트를 적용할 수 있습니다.
local 함수는 사용자의 컴퓨터에 이미 설치된 폰트를 참조합니다. 이 방법을 사용하면 웹 페이지 로딩 시 해당 폰트를 다운로드할 필요가 없어져, 페이지 로딩 시간이 단축됩니다. 예를 들어, 다음과 같이 local()함수와 url함수를 적용할 수 있습니다.
@font-face
{ font-family: 'MyWebFont'; /* 폰트 이름 설정 */
src: local('MyWebFont'), /* 사용자 컴퓨터에 설치된 폰트 */
url('mywebfont.woff2') /* 웹 폰트 파일 경로 */
}
과거 웹 페이지는 주로 시스템 폰트나 제한된 웹 안전 폰트를 사용했기 때문에 local 함수와 같은 고급 기능은 비교적 덜 알려져 있었는데요.
local 함수의 사용은 속도 개선과 대역폭 절약을 통해 사용자 경험을 향상시키는 데 도움이 됩니다. 따라서 local 함수와 함께 url 함수를 백업 옵션으로 사용하는 하이브리드 접근법을 권장합니다. 폰트의 사용 가능성과 성능을 최적화할 수 있기 때문입니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 12월 13일 오전 12:35
댓글 0
함께 읽은 게시물
하나부터 열까지 리더가 상세히 설명해 주기를 바라는 구성원이 있습니다. 반대로 큰 얼개만 듣고 나머지는 자율적으로 하고 싶어 하는 경우도 있죠. 회식에 참여하는 것을 너무나 힘겨워 하는 구성원이 있는 반면, 동료들과 함께 시간을 보내며 가까워지는 것을 원하는 구성원도 있습니다.
... 더 보기
GraphRAG 에 대한 생각
2000년 초반부터 온톨로지 연구를 해왔고, 관심을 갖고 있는 사람으로서 GraphRAG 에 대해 갖고 있는 생각을 적어봤습니다.
... 더 보기나는 가끔 조합형 한글의 아름다움에 대해 생각한다.
그 아름다움은 단순히 예쁜 글꼴이나 정갈한 종이 위의 자소 배열에서 끝나지 않는다. 진짜 매력은, 정밀한 정보 구조와 이산 수학적 규칙성 속에 숨어 있다.
직장인으로서 10년 정도 일하게 되면 피할 수 없는 순간이 바로 조직에서 리더의 역할을 받게 되는 인사발령이다. 팀원이었을 때는 내게 주어진 업무를 내가 가진 능력과 주변 동료들의 도움으로 해결하고, 그에 합당한 평가와 보상을 기다리며, 나쁘지 않는 리워드와 내 위치에 안도하며 또 새해를 맞이하고 하루하루를 버텨나가는 과정에 큰 어려움이 없다.
... 더 보기-
ChatGPT 버전명 설명
ChatGPT 사용할 때 어떤 모델을 선택해야할지 망설여집니다. 모델명만 봐서는 어떤게 좋은지 모르겠더라고요.
... 더 보기
