font template
1.0.0
Adobe Illustrator 글리프 (문자)의 모양을 하나의 .ai 파일 (또는 원하는 경우 각각 .ai 파일로)으로 편집 할 수있는 Adobe Illustrate 템플릿 .ttf 사용하여 .svg 파일로 내보내면서 무료 및 오픈 스쿠스 글꼴 제조업체 인 Fontforge에서 글꼴 파일로 가져올 수 있으며 최종 제작 파일 ( .otf , .woff .woff2 .
내 웹 사이트 에서이 튜토리얼의 아름다운 버전
font_template.ai (다운로드) : Adobe Illustrator 기본 및 확장 기호 및 라틴 문자 (중요한 CP1252 적용 범위)를위한 Adobe Illustrator 글꼴 템플릿 각 Glyph에는 별도의 아트 보드가있어 각각의 개별 Glyph SVG 파일로 쉽게 내보낼 수 있습니다.font_template_single.ai (다운로드) : 단일 글리프의 Adobe Illustrator 글꼴 템플릿. 원하는 경우 font_template.ai 대신 (또는 함께)이 파일을 사용할 수 있습니다.batch_import_svg.py (Open, 그런 다음 ctrl + s / cmd + s 를 저장) : 여러 svg 개별 글리프 파일을 fontforge의 .sfd 글꼴 파일로 가져올 수있는 Python 스크립트 (그리고 선택적으로 그것을 생산 글꼴 파일, 즉 .otf , .ttf , .woff , .woff2 등으로 변환 할 수 있습니다). (파일을 다운로드하는 대신 git clone https://github.com/tomchen/font-template.git 또는 전체 저장소를 다운로드하거나 다운로드 할 수도 있습니다).
( 20 주년 에디션 (2020-11-07) (Github 릴리스 페이지 또는 fontforge.org 다운로드 페이지) 인 Fontforge의 최신 버전을 사용해야합니다. 오래된 Windows 버전 20200314 SVG 파일을 가져올 때 충돌합니다).
font_template.ai 열고 "아트 워크 글리프"레이어에 글리프를 그립니다.
(Glyph가 부분적으로 그리고 약간 외부에 있는지는 중요하지 않습니다.)
글리프 그리기를 마친 후 "example Glyph"층을 숨 깁니다. "파일" -> "내보내기" -> "화면 내보내기"를 클릭하십시오.
내보내는 글리프를 선택하고 (비어있는 것을 선택하지 않음) "SVG"형식을 선택하고 "Artboard 내보내기"를 클릭하십시오.
내보낸 개별 Glyph SVG 파일은 "SVG"폴더 내부에 있으며 batch_import_svg.py 스크립트 파일이 포함 된 폴더에 넣습니다.
Windows 사용자의 경우 C:Program Files (x86)FontForgeBuildsfontforge-console.bat ,* cd <FOLDER_PATH> 사용하여 폴더로 이동하고 ffpython batch_import_svg.py 사용하여 Python 스크립트를 실행하십시오. output.sfd 글꼴 파일이 생성됩니다.
Mac 또는 Linux 사용자의 경우 cd <FOLDER_PATH> 및 fontforge -lang=py -script batch_import_svg.py 실행하십시오.
(*: 64 비트 Windows의 경우 Program Files (x86) , 32 비트 Windows의 경우 Program Files )
Fontforge로 output.sfd 글꼴 파일을 엽니 다. 글리프의 너비를 조정하십시오 ( Shift Key를 사용하여 너비를 조정하려는 모든 글리프를 선택한 다음 메뉴에서 "메트릭" -> "자동 너비"를 선택하거나 Glyph를 두 번 클릭하고 수동으로 테두리 라인을 드래그하십시오).
메뉴에서 "파일" -> "글꼴 생성 ..."를 선택하십시오.
글꼴 이름을 입력하고 글꼴 형식 (일반적으로 Truetype 또는 OpenType)을 선택하고 "생성"버튼을 클릭하십시오. 그런 다음 자체 제작 된 컴퓨터 글꼴이 있습니다!
여기서 멈출 수 있으며 다음 섹션을 읽을 필요가 없습니다.
이 글꼴 템플릿은 단일 글리프를 그리고 단일 글리프 SVG를 생성하는 데 사용될 수 있습니다.
다음 이미지는 단일 글리프의 가이드를 나타냅니다.
Fontforge에서 Glyph를 선택하거나 Glyph를 열면 "File" -> "import ..."를 클릭하고 "SVG"를 "형식"으로 선택하고 단일 Glyph SVG 파일을 선택하고 가져 오십시오.
기존 .sfd font 파일을 열거나 fontforge gui를 사용하지 않고 직접 .otf , .ttf , .woff , .woff2 를 생성하려면 batch_import_svg.py 파일을 수정하십시오.
Fontforge 메뉴에서 "파일" -> "Script 실행"을 클릭하십시오.
복사 및 붙여 넣기 : SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
"FF"방사형 버튼을 선택하십시오.
"확인"버튼을 클릭하십시오.
글리프의 모양에 여러 개의 겹치는 경로가 포함되어 있다면 그룹화하거나 복합 경로를 만드는 대신 (좋은 YouTube 튜토리얼)에 가입하는 것이 좋습니다. 이 단계는 겹치는 경로에 대한 글꼴 렌더링 문제를 피하는 데 도움이됩니다. 그러나 분만 (비 겹치는) 경로의 경우 "그룹"( Ctrl + G ) 또는 "화합물 경로"( "대상" -> "화합물 경로" -> "make")를 자유롭게 사용하십시오.
Scrach에서 Fontforge로 글꼴 파일을 만드는 대신 기존 무료 및 오픈 소스 글꼴 파일을 기본 및 폴백 글꼴로 사용하는 것이 좋습니다. 글리프 커버리지가 우수한 일반적인 오픈 소스 글꼴은 Adobe의 Source Sans Pro 및 Serif Pro입니다. 필요에 따라 "일반"과 같은 무게를 선택하십시오. Fontforge로 글꼴 파일을 열고 편집하여 글꼴을 작성하십시오. 그러나 기존 글꼴을 사용하는 경우 AZ, AZ뿐만 아니라 "FF"및 "Fi"와 같은 인대를 편집해야 할 수도 있습니다.
일러스트 레이터의 "화면 내보내기"창에서 글리프를 선택하면 빈 글리프를 선택하지 않아야합니다. 그렇지 않으면 batch_import_svg.py 스크립트를 실행할 때이 파일이 이해하기에는 너무 복잡하다 "경고를 알 수 있습니다. 그럼에도 불구하고, 그것은 멈추지 않으며 output.sfd 파일을 계속 생성합니다.
2020 44 comma 8 월 19 일, 프로젝트의 font_template.ai 파일이 업데이트되었습니다 (많은 아트 보드 이름 44 , 변경되었습니다. 2020-08-19 이전에 font_template.ai 다운로드 한 후 이전 버전을 기반으로 .ai 파일을 만든 경우 다음 방법 중 하나를 사용하여 font_template.ai 에서 아르트 보드 이름을 업데이트 할 수 있습니다.
.ai 파일에서 최신 font_template.ai 로 복사하십시오./other_files/update_artboard_names.js in Illustrator : Adobe Illustrator에서 .ai 파일을 엽니 다. 메뉴에서 "파일" -> "스크립트" -> "기타 스크립트 ...", 다운로드 된 update_artboard_names.js 파일을 찾고 "열기"를 클릭하십시오. 업데이트 후 SVG 폴더에서 Glyph SVG 파일을 삭제하고 재생하십시오.
(** : 이전 버전을 사용하고 있지만 Glyph가 기본 ASCII 문자로 제한되어 있으므로 SVG 유니 코드 Filename 관련 문제가 발생하지 않으면 .ai 파일을 업데이트하지 않도록 선택할 수 있습니다).
나만의 글꼴이 있으면 웹 페이지 (웹 사이트, 웹 애플리케이션, 전자 컴파일 크로스 플레이트 형식 데스크톱 응용 프로그램 포함 또는 기본 / NativeScript 모바일 앱을 반응)에서 사용할 수 있습니다.
글꼴은 알파벳 글꼴 또는 흑백 아이콘 글꼴 일 수 있습니다. 색상 아이콘을 표시하려면 SVG 또는 PNG를 사용하십시오.
CSS 폴더에 .woff2 및 .woff font files ( my_font.woff2 및 my_font.woff )를 넣고 CSS 파일에 다음 코드를 삽입합니다 (IE9+지원).
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} (IE를 지원하지 않으려면 .woff 파일을 삭제하고 .woff2 만 사용할 수 있습니다.
그런 다음 사용자 정의 된 font-family 이름을 사용하십시오 (예에서 'MyFont') :
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}HTML :
< span class =" my-special-font " > B </ span > 흑백 아이콘 글꼴 인 경우 HTML 코드의 문자 B는 문자 B에 흑백 아이콘 매핑으로 표시됩니다. 웹 개발자는 일반적으로 기본 라틴어 / SEO / 접근성 문제에 비해 U+EEA0 및 U+F2BB와 같은 유니 코드 개인 사용 영역에서 문자를 사용하지만, 라틴어를 사용하지 않도록하는 사람은 없습니다. 이러한 문제를 해결하기 위해 HTML 요소에 role 및 aria-label 속성을 추가하여 글꼴 아이콘을 의미 적으로 식별 할 수 있습니다.
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > 이 저장소의 모든 것에 대한 MIT 라이센스
