====== 웹 폰트 폰트 ======
웹 폰트 관련 정보를 제공합니다.

===== 웹 폰트 정의 =====
웹 폰트는 사용자의 로컬 컴퓨터에 폰트가 설치되어 있는지 여부와 상관없이,
웹서버 공간에 폰트 정보 파일을 올려두고, 웹에서 자유롭게 이용할 수 있는 표준 규약입니다.

1998년 W3C의 CSS Level 2에서 제안되었으며, HTML 콘텐츠의 활용도를 높이는 데 도움이 됩니다

==== 웹 아이콘 폰트 ====
웹 아이콘 폰트(icon font)란 문자/숫자 대신 아이콘(icon)과 심볼(symbol)로 채워진 "폰트 파일"이다.

일반적인 이미지 보다는 아이콘 같은 작은 크기의 이미지를 사용할 때 쓰는 타입이다

===== 개발 환경 웹 폰트 설정 =====
개발 환경(xFrame5-DevStudio)에서는 웹폰트를 직접 사용하지 못하기 때문에,
웹폰트에 해당하는 폰트 파일(TTF/OTF 등등)을 개발자 PC에 미리 설치해야한다.

==== 개발 환경 웹 아이콘 폰트 정보 설정 ====
현재 버튼/텍스트 컴포넌트에 웹 아이콘 폰트 관련 정보 설정용 속성을 아래와 같이 제공한다.

|<100% 160px ->|
^ 용어 ^ 설명 ^
| text_prefixicon_class | Font Awesome과 같이 클래스 기반 웹 폰트 사용시, 버튼 텍스트 앞 아이콘에 적용될 사용자 정의 클래스 이름 |
| text_postfixicon_class | Font Awesome과 같이 클래스 기반 웹 폰트 사용시, 버튼 텍스트 뒤 아이콘에 적용될 사용자 정의 클래스 이름 |
| text_prefixicon_text | Google Material Symbols 웹 폰트 사용시, 버튼 텍스트 앞 아이콘에 적용될 텍스트 |
| text_postfixicon_text | Google Material Symbols 웹 폰트 사용시, 버튼 텍스트 뒤 아이콘에 적용될 텍스트 |

===== 사용자 환경 웹 폰트 설정 =====
사용자 환경(Web-Browser)에서는 아래와 같이 구성합니다.
  - 폰트 관련 파일을 특정 웹서버 경로에 업로드
  - xFrame5 화면 로더 HTML 또는 화면 로드 HTML에서 사용하는 CSS 파일에 웹폰트 사용 방식에 따라 정보를 설정

화면 로더에 대한 자세한 설명은 [[guide:general:screen_loader_guide|화면 로더 가이드]]를 참조한다.

===== 웹폰트 성능 =====
웹 폰트는 방문자의 로컬 컴퓨터에 폰트가 설치되어 있는지 여부와 상관없이,
사이트에서 미리 지정한 경로에 있는 폰트 파일을 브라우저가 자동으로 다운 받아 화면에 보여주는 기술입니다.

웹 폰트는 별도의 설치 과정 없이 다양한 폰트체를 사용할 수 있다는 장점이 있지만,
웹 기준으로 봤을 때 상대적으로 무거운 용량의 파일(무거운 폰트는 10MB를 넘기도 한다)을 다운받아야 하기 때문에,
최적화를 하지 않을 경우 웹 성능 저하의 원인이 되기도 합니다.

** 웹 폰트는 반드시 필요한 경우에만 사용하고,
사용할 해경우, 경량의 폰트 크기로 작성된 폰트를 사용하는 것을 권고하며,
아래와 같이 WOFF 폰트 유형을 사용하는 것을 권고합니다. **

==== WOFF 폰트 유형 사용 권고 ====
WOFF 폰트 유형은 아래와 같은 장점이 있기 때문에 권고합니다.
  * 용량이 가볍습니다. WOFF2부터는 TTF/OTF와 비교했을 때 많게는 열배정도 차이가 나기도 합니다.
  * 라이센스를 포함할 수 있습니다. 라이센스는 폰트의 무단 수정, 재배포를 방지할 수 있습니다.
  * 인쇄 정보를 포함할 수 있습니다. 근사값이 아닌 정확한 인쇄 정보를 포함할 수 있어, 웹사이트 인쇄 시 정확도가 향상됩니다.
  * 검색 엔진 최적화(SEO)에 좋습니다. 다른 CSS 스타일 텍스트와 마찬가지로 텍스트 이미지보다 데이터 크롤링에 더 유리합니다.