폰트와 아이콘

폰트(Fonts)

폰트의 통일

브라우저마다 기본으로 지정된 폰트가 다를 수 있기 때문에 폰트를 하나로 통일 시키는 것이 좋다.

만약 기본 폰트를 지정하지 않거나, 범용적이지 않은 폰트를 사용하게 된다면 사용자에게 보여지는 스타일 혹은 정보들이 달라 질 수 있다.

위는 크로스 브라우징(Cross Browsing)을 위함이며, 이는 웹표준을 준수하여 다른 기종, 브라우저 중 어느 하나에만 치우치지 않고 호환성을 높여 어느 환경에서도 잘 기능하는 웹사이트를 만드는 것을 이야기한다.

폰트의 최적화

폰트는 용량이 크므로, 무분별하게 폰트를 불러와 사용하는 것이 아니라, 정말 필요한 폰트들만 불러와 쓸데없는 데이터를 다운받지 않는 것이 최적화 측면에서 유리하다.

폰트 사용의 주의점

사용 할 수 있는 모든 것에 동일하지만, 라이센스가 존재하는 경우 해당 라이센스가 상업적으로 이용 될 수 있는 라이센스인지 확인하고 사용하는 것이 좋다.

구글 폰트(Google Fonts)

https://fonts.google.com/

구글에서 제공하는 폰트 라이브러리로써 직접 글씨체와 제공하는 두께등을 확인하고 사용 할 수 있다.

구글 폰트에서 제공하는 모든 폰트들은 개인적인 용도 및 상업적인 용도로 사용이 가능하다.

구글 폰트 사용방법

구글 폰트 사이트에 접속한다.

원하는 폰트를 선택하고, 원하는 스타일(두께)을 선택한다.

우측에 생성된 메뉴에서 문서에 작성할 방식(HTML link 태그, CSS @import)을 선택하고, 해당 내용을 문서에 붙혀 넣는다.
(다수의 경우에 HTML이 사용 될 것.)

아래에 작성되어 있는 CSS의 font-family 속성을 적용하고자 하는 곳에 붙혀넣기 한다.

참고 URL - https://developers.google.com/fonts/docs/getting_started

예시

<!--HTML 문서-->
<head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
	<!--구글 폰트에서 제공하는 링크 태그-->
	<link rel="stylesheet" href="main.css 경로">
</head>

/*CSS 문서*/
body {
	font-family: 'Noto Sans KR', sans-serif;
}
/*적용하고자 요소에 구글 폰트에서 제공한 CSS rules(CSS 속성과 속성값)를 붙혀넣기 한다.*/

폰트의 경우 반드시 main으로 사용할 CSS 파일보다 먼저 작성되어야 한다.
외부(구글 폰트)에서 폰트로 사용할 CSS를 인터넷으로 먼저 불러와 로컬의 CSS 문서와 함께 사용하는 것으로 볼 수 있다.

아이콘

디자인 팀이 있고 이미지를 요청해서 만들 수 있는 경우엔 자체적으로 아이콘을 제작하여 이미지를 불러와 사용 할 수 있겠지만, 그렇지 않은 경우 라이브러리를 사용하는 방법도 있다.

머테리얼 아이콘(Material Icons)

https://fonts.google.com/icons?selected=Material+Icons

구글 폰트와 마찬가지로 구글에서 제공하는 아이콘 라이브러리

간단한 설정 이후에 정해진 클래스명을 이용하여 원하는 아이콘을 불러와 사용가능하다.

24px * 24px 의 크기로 불러오게 된다.

머테리얼 아이콘 사용방법

HTML 문서의 head 영역에 아이콘들을 사용하기 위한 스타일시트(link 태그)를 불러온다.

구글 폰트 웹페이지 상단의 icons 탭으로 이동하여 원하는 아이콘을 선택 한 후 우측에 안내되는 html 내용을 붙혀넣기 하면 된다.

참고 URL - https://developers.google.com/fonts/docs/material_icons

예시

<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
	<!--머테리얼 아이콘을 사용하기 위한 스타일시트 불러오기-->
</head>
<body>
	<span class="material-icons">제공하는 아이콘의 이름</span>
	<!--아이콘을 선택한 후 우측에 표시된 html 내용 붙혀넣기-->
</body>

+

위에서 작성한 라이브러리 외에도 다른 곳에서 제공하는 라이브러리도 많으니 참고하자.
많은 라이브러리가 있는 만큼 라이브러리를 사용하기 전에는 상업적인 이용에 문제가 없는지를 꼭 확인하는 습관을 들이는 것이 중요 할 것.

Author And Source

이 문제에 관하여(폰트와 아이콘), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chl4842/폰트와-아이콘

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

폰트와 아이콘

폰트(Fonts)

폰트의 통일

폰트의 최적화

폰트 사용의 주의점

구글 폰트(Google Fonts)

구글 폰트 사용방법

예시

아이콘

머테리얼 아이콘(Material Icons)

머테리얼 아이콘 사용방법

예시

+

Author And Source

좋은 웹페이지 즐겨찾기