웹용 기호 글꼴 만드는 현실적 방법

주·이쪽 기사 내용은 좀 낡았으니 사용하세요Symbols for Sketch
해방하다의 아이콘을 웹으로 서체화할 때 다양한 중첩이 있어 키트 허브에 심플한 기호 서체를 만드는 템플릿을 공개했다.Ligature를 사용하는 방법이 최근 트렌드입니다.하지만 디자이너들이 자주 업데이트하는 상황에서 잘 사용할 수 있는 도구가 없는 상황이다.여기서는 폰트 아워썸 등과 마찬가지로 유니cde의 PUA(사적인 영역)에 글꼴을 배분하는'시들'방법을 적용한다.
이 템플릿을 사용하려면 두 개의 소프트웨어가 필요하다.
  • Adobe Illustrator
  • Glyphs mini
  • 글립스 미니는 최근 등장한 글립스 글꼴 제작 환경을 비교한 저렴한 버전이다.기호 글꼴을 만들 수 있는 기능이 있는 것은 약 45달러다.이 펜치 업계로서 매우 실속이 있다.
    기타, 로컬에서 글꼴 변환이 진행되는 경우 FontForge 등이 필요하지만 이 부분에서는 사랑을 끊어야 한다.후반전에 mekablue가 설명한 링크가 있습니다. 보십시오.
    (따라서, 이하 Symbols의 일본어 번역)
    symbols.ai
    는 Illustrator CS6을 사용하여 기호 또는 아이콘을 만드는 템플릿입니다.
  • 1792x1792px: 글꼴 크기입니다.1792=128x14=64x28이므로 14px 또는 28px로 표시된 경우 선명하고 또렷합니다. ※Font Awesome과 공통적입니다.Bootstrap의 표준 문자 크기도 14px입니다.
  • 64개의 문서: Illustrator 파일은 64자의 문서를 포함합니다.64라는 숫자는 웹 사이트를 만드는 데 충분한 숫자이다.

  • symbols.glyphs
    Illustrator로 만든 아이콘Glyphs miniorGlyphs로 글씨체를 만든 템플릿입니다.
  • 와 1792x1792px: Illustrator의 템플릿이 일치합니다.(unit perem 1792)
  • U+F700~U+F73F가 할당되었습니다.유니코드의 PUA(개인 영역)들이다.

  • 사용법
  • GiitHub다운로드에서 왔습니다.
  • Illustrator Symbols에 있습니다.ai 템플릿으로 아이콘을 만듭니다.

  • symbols.glyphs mini를 사용하여 glyphs를 열고 복사하여 붙여넣습니다.

  • Glyphs mini에서 fonts 디렉토리로 내보내고 OTF(=Open Type Font)를 통해 내보냅니다.
  • OTF를 다양한 웹 글꼴로 변환합니다.@font-face kit generator 등을 참조하십시오.변환된 글꼴도 fonts 디렉터리에 있습니다.

  • test.''을(를) 열어 글꼴의 올바른 내보내기/변환을 확인합니다.

  • symbols.개인 취향에 따라 css:-로 다시 쓰기
  • 상급편(⇔63;)
    검은색 화면을 봐도 상관없는 사람은 로컬 환경에서도 웹 글꼴을 변환할 수 있다.
  • 설치되지 않은 경우 FontForge 및 주변 도구를 설치합니다.참조the instruction written by mekkablue.

  • Meta.xml을 고쳐 쓰고 허가증 등을 기록합니다.WOFF를 만들려면
  • 검은색 화면에서 창고 디렉터리로 이동합니다.cd your/repository
  • 스크립트를 실행합니다.sh webfontmaker.sh 각종 글꼴을 자동으로 fonts 하위 디렉터리로 변환해야 합니다.
  • Glyphs mini에서는 OTF를 출력한 뒤 이 스크립트가 자동으로 실행되도록 gruntjs 근처에서 훈련하는 것이 좋다.(하지는 않았지만)
    Appendixwebfontmaker.sh is originally created by mekkablue . See more detail here…
  • https://github.com/mekkablue/webfontmaker
  • 좋은 웹페이지 즐겨찾기