웹 폰트 관련 정보를 제공합니다.
웹 폰트는 사용자의 로컬 컴퓨터에 폰트가 설치되어 있는지 여부와 상관없이, 웹서버 공간에 폰트 정보 파일을 올려두고, 웹에서 자유롭게 이용할 수 있는 표준 규약입니다.
1998년 W3C의 CSS Level 2에서 제안되었으며, HTML 콘텐츠의 활용도를 높이는 데 도움이 됩니다
웹 아이콘 폰트(icon font)란 문자/숫자 대신 아이콘(icon)과 심볼(symbol)로 채워진 “폰트 파일”이다.
일반적인 이미지 보다는 아이콘 같은 작은 크기의 이미지를 사용할 때 쓰는 타입이다
개발 환경(xFrame5-DevStudio)에서는 웹폰트를 직접 사용하지 못하기 때문에, 웹폰트에 해당하는 폰트 파일(TTF/OTF 등등)을 개발자 PC에 미리 설치해야한다.
현재 버튼/텍스트 컴포넌트에 웹 아이콘 폰트 관련 정보 설정용 속성을 아래와 같이 제공한다.
| 용어 | 설명 |
|---|---|
| text_prefixicon_class | Font Awesome과 같이 클래스 기반 웹 폰트 사용시, 버튼 텍스트 앞 아이콘에 적용될 사용자 정의 클래스 이름 |
| text_postfixicon_class | Font Awesome과 같이 클래스 기반 웹 폰트 사용시, 버튼 텍스트 뒤 아이콘에 적용될 사용자 정의 클래스 이름 |
| text_prefixicon_text | Google Material Symbols 웹 폰트 사용시, 버튼 텍스트 앞 아이콘에 적용될 텍스트 |
| text_postfixicon_text | Google Material Symbols 웹 폰트 사용시, 버튼 텍스트 뒤 아이콘에 적용될 텍스트 |
사용자 환경(Web-Browser)에서는 아래와 같이 구성합니다.
화면 로더에 대한 자세한 설명은 화면 로더 가이드를 참조한다.
웹 폰트는 방문자의 로컬 컴퓨터에 폰트가 설치되어 있는지 여부와 상관없이, 사이트에서 미리 지정한 경로에 있는 폰트 파일을 브라우저가 자동으로 다운 받아 화면에 보여주는 기술입니다.
웹 폰트는 별도의 설치 과정 없이 다양한 폰트체를 사용할 수 있다는 장점이 있지만, 웹 기준으로 봤을 때 상대적으로 무거운 용량의 파일(무거운 폰트는 10MB를 넘기도 한다)을 다운받아야 하기 때문에, 최적화를 하지 않을 경우 웹 성능 저하의 원인이 되기도 합니다.
웹 폰트는 반드시 필요한 경우에만 사용하고, 사용할 해경우, 경량의 폰트 크기로 작성된 폰트를 사용하는 것을 권고하며, 아래와 같이 WOFF 폰트 유형을 사용하는 것을 권고합니다.
WOFF 폰트 유형은 아래와 같은 장점이 있기 때문에 권고합니다.