Glyphter를 사용하여 사용자 정의 아이콘 글꼴을 만들고 사용하는 방법 요약

9091 단어 HTMLCSSHTML5font

Glyphter란?



Fontawesome 등 대표적인 아이콘 폰트 16종류로부터, 자신이 원하는 아이콘을 선택해 커스텀 아이콘 폰트를 작성할 수 있는 web 서비스입니다.

자체 제작된 SVG 파일을 준비하여 원본 아이콘을 글꼴에 추가할 수도 있습니다.

아이콘 세트 만들기



사전 설정된 아이콘 글꼴을 사용하는 경우



오른쪽에서 사용하려는 아이콘을 선택하고,
좌측의 A, B, C라고 표시되어 있는 곳에 아이콘을 드래그&드롭 해 갑니다.



맞춤 아이콘을 사용하는 경우



좌측의 알파벳 테두리의 공란을 더블 클릭하면 파일 다이얼로그가 표시되므로, SVG 파일을 지정합시다.
SVG 파일은 Illustrator 등으로 작성할 수 있습니다. 복합 경로를 사용하는 경우 경로를 윤곽화해야 합니다.
(D 아이콘이 사용자 정의 아이콘)



아이콘 글꼴 다운로드



아이콘 선택이 완료되면 화면 상단에 있는 제목을 입력하고 오른쪽에 있는 [FONT] 버튼을 클릭하여 글꼴을 다운로드합니다.



모달 대화 상자가 표시됩니다.
[JUST DOWNLOAD]를 클릭하면 다운로드가 시작됩니다.
아이콘 세트의 데이터를 저장하고 싶다면 SIGNUP하십시오.

glyphter-font.zip이라는 압축 파일이 다운로드됩니다. 적절한 도구를 사용하여 압축을 풉니 다.

아이콘 글꼴의 CSS 정의



추출한 파일의 css 폴더에 있는 css 파일을 엽니다.



기본 CSS라면 @font-face 의 정의뿐이므로, 각 아이콘의 스타일을 추기해 갑니다.

customfont.css
/* Generated by Glyphter (http://www.glyphter.com) on  Tue Jan 20 2015*/
@font-face {
    font-family: 'customfont';
    src: url('../fonts/customfont.eot');
    src: url('../fonts/customfont?#iefix') format('embedded-opentype'),
         url('../fonts/customfont.woff') format('woff'),
         url('../fonts/customfont.ttf') format('truetype'),
         url('../fonts/customfont.svg#customfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

Fontawesome의 css를 참고로 요소의 :before에 아이콘이 표시되도록 했습니다.
content: "A"; 의 부분은 Glyphter에서 A에 배치한 아이콘과 대응하고 있습니다.

customfont.css
@font-face {
    font-family: 'customfont';
    src: url('../fonts/customfont.eot');
    src: url('../fonts/customfont?#iefix') format('embedded-opentype'),
         url('../fonts/customfont.woff') format('woff'),
         url('../fonts/customfont.ttf') format('truetype'),
         url('../fonts/customfont.svg#customfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
.cf {
    display: inline-block;
    /*末尾のfontfaceの指定をカスタムフォントに*/
    font: normal normal normal 14px/1 customfont;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.cf-tv:before {
    content: "A";
}
.cf-globe:before {
    content: "B";
}
.cf-apple:before {
    content: "C";
}
.cf-star:before {
    content: "D";
}

HTML에서 아이콘 글꼴 표시



css 파일에 정의한 클래스를 지정하면 아이콘 글꼴이 정상적으로 표시됩니다.

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>アイコンフォントの表示テスト</title>
    <link rel="stylesheet" href="css/customfont.css">
</head>

<body>
    <div class="cf cf-tv"></div>
    <div class="cf cf-globe"></div>
    <div class="cf cf-apple"></div>
    <div class="cf cf-star"></div>
</body>

</html>



2015-01-23 추가



icomoon 라는 유사한 서비스가 있습니다.
이쪽이 CSS를 자동 생성해 주고, 간편하게 편입할 수 있으므로 추천입니다.
아이콘 글꼴과 문자 글꼴을 명령줄로 이미지로 출력
Android에서 Noto 폰트 · Roboto 폰트 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage