자신만의 윈도우용 글꼴을 만드는 방법. 나만의 손글씨 글꼴을 만드는 방법. 러시아어 FontCreator - 글꼴 만들기
안녕하세요 여러분.
얼마 전 시험에 응시하려면 수업에 결석한 모든 사람이 직접 작성한 에세이를 제출해야 하는 문제가 발생했습니다. 1-2 패스의 경우 1개의 에세이, 2-5 패스의 경우 2개의 에세이 등입니다. 각 초록은 최소 10장 이상입니다. 인터넷에서 특정 주제에 대한 초록을 찾는 것은 어렵지 않습니다. 하지만 최소한의 노력으로 전체 내용을 종이로 옮기는 방법은 무엇입니까?많은 러시아어 손글씨 글꼴이 인터넷에서 발견되었습니다(링크). 그러나 이러한 글꼴의 사본을 여러 개 다운로드한 후에는 아무도 쓰여진 내용의 진위 여부를 믿지 않을 것이며 교사가 동일한 손글씨로 무언가를 쓰라고 요청했을 때 간단한 테스트를 통과할 수 없다는 것이 분명해졌습니다.그러므로 결정되었다 나만의 손글씨체 만들기. 하지만 손글씨로 글꼴을 만드는 방법아무도 그를 구별할 수 없도록 하고, 글을 쓴 사람이 바로 당신임을 침착하게 보여줄 수 있도록요?
해결책이 발견되었습니다 - 훌륭한 프로그램인 High-Logic FontCreator Professional 9
필기체 글꼴
Font Creator를 설치했는데 문제가 없을 것 같습니다.
- 깨끗한 흰색 종이에 모든 숫자, 러시아어 및 영어 알파벳 문자 및 특수 문자를 씁니다. 기호.
- 결과 알파벳을 스캔하거나 (바람직하게는) 사진을 찍습니다.
- 그림판, 포토샵에서 또는 다른 그래픽 편집기에서 스캔한(사진에 찍힌) 알파벳을 엽니다.
- 설치된 글꼴 생성기를 실행합니다:
- 파일(파일) - 새로 만들기(새로 만들기) 또는 Ctrl + N을 클릭합니다.
- 우리는 손글씨로 글꼴에 이름을 부여합니다 (내 글꼴. 루 ), 일반 및 윤곽선 포함 안 함(실루엣의 빈 윤곽선)을 선택합니다.
- 기호, 영문자 및 기타 알파벳의 실루엣이 표시된 창이 나타납니다. 이제 러시아 알파벳 문자를 추가해 보겠습니다.
1. 맨 윗줄에서 삽입을 클릭하고 문자를 선택합니다.
2. 손으로 쓴 글꼴의 글자와 기호가 포함된 표가 눈앞에 나타납니다. 표 하단으로 스크롤하여 러시아어 알파벳 글자를 찾습니다.
3. 문자 "A"를 선택하고 추가를 클릭한 다음 "I"를 선택하고 추가를 클릭합니다.
4. 같은 방법으로 "Ё", "е" 문자와 필요한 다른 알파벳 문자를 추가합니다.
5. "다음 문자 추가..." 필드에서 쉼표를 $0410-$044F 사이의 대시로 변경합니다.6. 결과적으로 다음 문자 추가... 필드에 $0410-$044F,$0401,$0451과 같이 기록되어야 합니다.
7. 확인을 클릭합니다.
추가한 러시아어 기호와 모든 문자 및 기호가 템플릿에 나타납니다.
필요하지 않은 모든 문자를 삭제합니다(처음 4개를 제외하고는 시스템 문자입니다).
아직 열어보지 않았다면 이제 열 차례입니다.
그래픽 편집기에서 첫 번째 문자를 선택하고 복사합니다( Ctrl 키 +C) 글꼴 생성기에서 이 문자를 선택하고 삽입( Ctrl + V)
가장 낮은 라인 1(Win Descent)은 꼬리가 있는 문자(ts, y, shch, z, r, d)에 대한 최대 한계입니다. 이 라인 아래의 모든 내용은 인쇄되지 않습니다.
2행(기준선)은 각 문자의 지지선입니다. 모든 문자는 이 줄에 위치해야 합니다.
3행(x-높이) - 작은 글자의 최대 높이입니다.
4행(CapHeight) - 큰 문자, 숫자 및 문자 "c", "d", "b"의 최대 높이입니다.
5행(WinAcent ) - 최대 문자 수, 이 줄 위의 모든 내용은 인쇄되지 않습니다.
왼쪽(6) 및 오른쪽(7) 수직선은 글꼴 문자가 서로 닿는 방식을 결정합니다. 원고와 같이 글자가 서로 닿게 하려면 글자를 왼쪽(6)에 가깝게 이동하고 오른쪽(7)을 글자 위로 이동하여 선을 약간 넘어 핥아줍니다.
모든 문자를 선에 맞춰 조정합니다. 그렇지 않으면 글꼴 문자가 무작위로 배치되어 아름답지 않게 됩니다.다른 문자 배열의 예:
이제 다 끝났습니다. 글꼴을 설치하고, 텍스트 편집기를 실행하고, 글꼴을 찾아 사용해 보세요. 글꼴을 설치하는 방법.
위에 설명된 모든 작업을 수행하기에는 너무 게으르고 귀하의 손글씨로 전문적으로 만들어진 글꼴을 얻고 싶다면 당사 웹 사이트에서 귀하의 주문을 기다리고 있습니다.
나만의 글꼴 만들기
안녕하세요 여러분. 약속대로 나만의 글꼴을 만드는 방법을 알려드리겠습니다.
여기서는 프로그램을 다운로드할 수 있는 링크를 제공하지 않는다고 바로 말씀드리지만, 직접 찾는 것은 어렵지 않을 것입니다. 이 프로그램은 High-Logic Font Creator라고 하는데, 제가 이 프로그램으로 시작했는데, 이것은 여러분이 그린 글자를 실제 글꼴로 바꾸는 가장 간단한 방법입니다. 오류가 발견되면 적어주세요. 이 모든 작업은 거의 직관적으로 수행되었으며 저는 훌륭한 실행을 하는 척하지 않습니다. :) 그리고 평소와 같이 클릭하면 더 큰 이미지가 열립니다.
전문적으로 글꼴을 다루는 친구들은 맹세하지 마십시오. 여기에는 용어 나 규칙이 거의 없습니다. 이 포스팅은 항상 이런 것을 만들고 싶었지만 어떻게 접근해야 할지 모르셨던 분들을 위한 포스팅입니다 :)
따라서 우리가 가장 먼저 해야 할 일은 문자, 숫자, 기호, 즉 필요한 모든 것을 그리는 것입니다. 이 세트는 스톡용으로 그렸는데, 오늘은 폰트로 바꿔보겠습니다. 작은 소문자는 없으니 그것도 그려서 폰트를 꽉 채우세요. 
저는 일러스트레이터로 모든 것을 그립니다만, 선택은 여러분의 몫입니다. 많은 사람들이 단순히 종이에 쓰고 스캔하는 것도 하나의 옵션입니다.
다음으로 각 문자를 별도로 저장해야 합니다. 이제 프로그램을 엽니다.
첫 번째 작업은 매우 분명합니다. 파일 - 새로 만들기... 창이 표시됩니다.
창에서 글꼴 모음 이름 필드에 글꼴 이름을 입력하고 유니코드, 일반, 윤곽선 포함 안 함을 선택합니다. 이것이 내 설정입니다 :)
확인을 클릭하면 가능한 모든 문자, 숫자 및 기타 기호가 포함된 글꼴 템플릿이 열린 것을 볼 수 있습니다.
기본 글꼴이 무엇인지 기억나지 않습니다. Arial 글꼴 템플릿 세트가 있습니다. 글꼴을 변경하고 문자를 추가하려면 삽입 - 문자로 이동해야 하며 상단 패널에 있습니다. 거기에 키릴 문자를 추가할 수도 있지만 지금은 그렇게 하지 않겠습니다.
다음으로 가장 중요한 것은 글자를 추가하는 것입니다. 대문자 A를 찾아서 더블클릭하세요.
셀과 줄무늬가 잔뜩 있는 창이 보입니다.
우리는 당황하고, 프로그램을 최소화하고, 심호흡을 하고, 돌아갑니다. 이제 Dina가 모든 것을 설명하겠습니다.
각 스트립에는 고유한 목적이 있지만 가장 먼저 해야 할 일이 있습니다. 이 창에서 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 이미지 가져오기를 클릭합니다.
우리는 모든 편지를 어디에 저장했는지 기억하고 A를 찾아 엽니다. 다른 창:
여기에는 복잡한 것이 없습니다. 슬라이더를 움직여 보이는 모든 것을 클릭하면 미리보기에서 어떤 설정이 가장 적합한지 알려줍니다. 사진은 내 것을 보여줍니다. 똑같이 시도해 볼 수 있습니다. 생성을 클릭합니다. 여기 우리의 편지가 있습니다:
그래서 우리가 보는 것은 수직 줄무늬 2개와 수평 줄무늬 5개입니다.
문자는 두 개의 수직 줄무늬 사이에 위치해야 하며 문자 전후의 거리를 나타냅니다. 편지에 너무 가깝거나 직접적으로 배치하지 마십시오. 그렇지 않으면 편지가 엉망이 될 것입니다.
그리고 이제 수평선에 대해서. 용어로 부담을 주지 않고 대중적으로 설명하겠습니다.
1. 맨 위 막대는 기준선(4) 위의 최대 거리입니다.
2. 위에서 두 번째는 대문자의 높이입니다.
3. 세 번째는 소문자의 높이입니다.
4. 모든 글자가 정렬되는 기준선입니다.
5. 기준선 아래 최대 거리(4).
수평선의 매개변수를 변경하려면 형식 탭에서 설정을 열어야 합니다. 무언가를 변경하고 싶다면 일부 인기 있는 글꼴의 매개변수를 인터넷 검색하여 예시로 사용하는 것이 좋습니다. 하지만 저는 그런 짓을 하지 않았어요 :)
보시다시피 2번째 줄인 CapHeight에 문자를 늘렸습니다. 남은 것은 세로 줄무늬를 조정하는 것뿐입니다. 글자 전후에 적당한 거리를 두고 싶어서 글자 자체를 왼쪽 선에서 멀리 이동시키고, 오른쪽 글자는 위쪽의 검은색 삼각형을 잡고 글자에 더 가깝게 이동시킵니다. 이와 같이:
이것이 바로 제가 모든 대문자로 할 일입니다. 소문자를 추가하는 경우 3번째 줄까지 높이를 지정하세요.
문자 위치를 지정했으면 이 창을 닫으면 됩니다. 모든 문자가 제자리에 들어가고 눈에 띄게 나타납니다.
꼬리가 있는 문자 Q가 있는데 일반 문자 열에서 눈에 띄는 것을 원하지 않기 때문에 기준선에 배치하고 아래에 꼬리를 남겨 둡니다.
모든 소문자(p, q, y, g, j)에 대해 동일한 작업을 수행하고, 반대로 일부는 대문자(d, b, k, f)보다 약간 높을 수 있습니다.
아직 숫자가 필요하지 않으므로 내 사진은 다음과 같습니다.
문자를 실제로 사용해 보고 싶다면 파일 - 다른 이름으로 저장으로 이동하여 프로그램에서 제안한 .ttf 형식으로 글꼴을 저장하세요.
글꼴을 설치하고 텍스트 편집기로 이동하여 글꼴을 찾아 확인합니다. 공장!
글쎄, 이제 당신은 탐닉할 수 있습니다. 5월 9일 불꽃놀이의 최악의 사진을 찍고, 포토샵으로 마술을 부리고, 텍스트를 입력하면 짜잔! :)
그렇게 어렵지는 않죠? 꼭 시도해보고 결과를 보여주세요 :)
글꼴을 만들려면 편집기를 사용하는 것이 좋습니다 폰트크리에이터하이로직 출신. 프로그램이 유료라고 바로 말씀 드릴게요. 그런데 이게 제 눈을 사로잡은 최고의 선택이에요. 무료 글꼴 편집기가 필요하다면 프로그램에 주목하세요 유형 빛 cr8software 및 온라인 서비스에서 글리프 스튜디오. 나는 FontCreator를 계속 사용할 것이다. (제가 착각한 것이 아니라면 버전 6.0이었습니다).
1 단계:따라서 편집기를 실행하고 다음 명령을 사용하십시오. 파일 > 새로 만들기(파일 > 새로 만들기) - 새 글꼴을 만듭니다. 열리는 창에서 새로운 글꼴 (영어로부터) 새로운 글꼴) , 다음과 같은 여러 매개변수를 지정해야 합니다.
- 글꼴 계열 이름- 글꼴 모음의 이름, 즉 그냥 폰트 이름 같은 거요 타임즈 뉴 로만, 나는 가리켰다 내 글꼴.
- 문자 세트- 글꼴에 포함된 문자 집합을 선택하는 것이 좋습니다. 유니코드(문자).
- 글꼴 스타일- 글꼴 스타일, 각 스타일에 대해 별도의 파일을 만들어야 합니다. 일반(기본) 글꼴 스타일의 경우 옵션을 선택하세요. 정기적인.
- 사전 정의된 개요- 내장 회로. 깔끔한 실루엣 윤곽선을 만들 수 있는 윤곽선 포함 안 함 옵션을 선택하는 것이 좋습니다.
2 단계:일부 기호, 숫자 및 라틴 문자의 실루엣 형태로 창이 나타납니다. 을 위한 키릴 문자 추가글꼴을 변경하려면 다음을 수행해야 합니다.
2.1. 다음 명령을 사용합니다. 삽입 > 문자… (삽입 > 기호...)- 창을 엽니 다 문자 삽입(영어로부터) 문자 삽입).
이 경우 다음과 같은 메시지가 나타날 수 있습니다.
이 작업은 취소할 수 없습니다. 계속하시겠습니까?
작업을 되돌릴 수 없으며 작업을 완료하려면 작업을 확인해야 한다는 메시지가 표시됩니다. 버튼을 누르세요. 예».
2.2. 다음으로 기호 표가 앞에 나타납니다. 편의상 목록에 글꼴글꼴 선택 Arial. 목록에 유니코드 블록으로 이동선택하다 키릴 문자. 필드 사용 선택한 캐릭터, 문자 "A"($0410) 및 "I"($044F)에 대한 코드를 살펴봅니다. 현장에서 다음 문자 및/또는 문자 범위를 추가하세요...필요한 문자 및/또는 문자 범위를 추가합니다. 이 경우 $0410-$044F 입니다. 버튼을 클릭하세요 " 좋아요».
2.3. 키릴 문자 기호가 글꼴 형식에 추가됩니다. 같은 방법으로 이전 단계에서 지정한 문자 범위에 포함되지 않은 "е"($0451) 및 "Ё"($0401) 문자를 별도로 추가할 수 있습니다.
3단계:이제 기호 생성을 시작할 수 있습니다. 여기에서는 벡터 편집 외에도 적절한 도구를 사용하여 FontCreator를 사용하면 그림을 벡터 이미지로 변환하여 그림에서 문자를 만들 수 있습니다. 분명히 각 기호에 대해 별도의 그림을 그려야 합니다.
3.1. 예를 들어 대문자 "A"를 그립니다.
3.2. 원칙적으로 스캔 후 이 이미지 파일을 가져오기에 사용할 수 있습니다. 이렇게 하려면 양식에서 원하는 기호의 이미지를 선택하십시오. 그런 다음 다음 명령을 사용하십시오. 도구 > 이미지 가져오기… (도구 > 이미지 가져오기)- 창을 엽니 다 래스터 이미지 가져오기 (영어로부터) 비트맵 가져오기) .
3.3. 열리는 창에서 버튼을 클릭하세요 짐…» (영어로부터) 다운로드) 그리고 필요한 이미지 파일을 선택하세요.
3.4. 슬라이더 이동 한계점 (영어로부터) 한계점) 윤곽선을 더 선명하게 만들려면 이미지의 어둡게 하기 수준을 설정하세요. 필터를 사용할 수도 있습니다.
- 부드러운 필터- 스무딩 필터.
- 좀먹다- 흐림, 기호를 더 굵게 만듭니다.
- 넓히다- 늘리면 글꼴이 더 얇아집니다.
가져오기 모드 (영어로부터) 가져오기 모드) 차라리 놔둬 추적하다, 곡선으로 변환합니다. 와 함께 부정적인 (영어로부터) 부정적인) , 모든 것이 명확하다고 생각합니다. 그러니 버튼을 클릭하세요. 생성하다».
4단계:편집 모드로 전환하여 양식의 기호를 두 번 클릭하면 불규칙성을 수정하고 크기를 조정하고 들여쓰기 선을 설정하기만 하면 됩니다. 다른 기호에도 동일한 작업을 수행해야 합니다.
일반적으로 글꼴을 만드는 과정은 특별히 어렵다고 할 수 없습니다. 이를 위해서는 인내와 많은 시간이 필요합니다. FontCreator 글꼴 편집기를 사용하면 문자 이미지를 가져와 벡터로 변환하여 여러 가지 방법으로 시간을 절약할 수 있습니다. 그러나 이 옵션조차도 많은 작업이 필요합니다. 그게 내가 가진 전부입니다. 관심을 가져주셔서 감사합니다. 행운을 빌어요!
제가 보기엔 편지 그리기와 레터링 창작에 열정을 갖고 있는 많은 사람들이 어느 시점에서 이 모든 아름다움을 글꼴로 바꿔야 하지 않을까 하는 생각을 가지고 있는 것 같습니다. 특정 구성을 감상할 수 있을 뿐만 아니라 이 아름다운 글자를 실제 키보드에 인쇄하여 더욱 아름다운 아름다움을 만들 수 있도록... 글쎄요, 적어도 저에게는 그랬습니다 :) 글꼴을 만들 수 있다는 것을 깨달았을 때 당신 자신, 그것은 문자 그대로 나에게 의식의 혁명을 일어났습니다. (아마 이것이 바로 영어로 "aha-moment"라고 불리는 것일 것입니다).
그리고 저는 이것을 어떻게 해야 할지 알아보기 시작했습니다. 정보가 거의 없었고, 거기에 있던 내용은 이해하기 어렵고 복잡했습니다. 나는 이 울창한 용어의 숲에서 길을 잃었고 글꼴을 만드는 방법을 배우는 아이디어를 거의 포기했습니다. 그러나 기적적으로 포기하지 않고 계속 노력하여 첫 번째 글꼴 Bronks를 만들었습니다. 이상적이지는 않지만 경험 측면에서 매우 가치가 있습니다. 그건 그렇고, 나는 브롱크스가 어떻게 만들어졌는지에 대해 이미 썼습니다. 그리고 오늘은 전체적으로 글꼴을 만드는 과정에 대해 더 자세히 설명하여 이것이 "귀하의" 활동인지, 시도해 보고 싶은지 여부를 더 쉽게 이해할 수 있도록 하고자 합니다.
글꼴은 간략하게 시작됩니다.
글리프 그리기가 오늘의 작업입니다 :)
용기, 즉 영감을 모은 후 보통 반나절 이상 (이상적으로는 하루 종일) 여유가 생길 때까지 기다렸다가 앉아 글리프를 그립니다. 글리프는 문자와 숫자, 더하기, 쉼표, 물음표 등과 같은 모든 기호를 포함한 글꼴의 문자입니다.
글꼴을 얼마나 광범위하게 그리는지, 즉 얼마나 많은 글리프를 만드는지는 대상 고객에 따라 직접적으로 달라집니다. 글리프가 많을수록 글꼴의 가치가 높아지는 것은 분명하지만 동시에 시간을 투자할 가치가 있는 글리프도 있고 그다지 많지 않은 글리프도 있습니다(예를 들어 표준 핸드드론 글꼴을 만드는 경우) 중소기업의 경우 광범위한 언어 지원은 모든, 모든, 모든 수학 기호보다 훨씬 더 관련성이 높을 것입니다. 솔직히 말해서 그 중 상당수는 Glyphs 프로그램에서 처음으로 보았습니다 :)). 제가 열심히 작업하고 있는 글꼴을 만드는 방법에 대한 워크숍에서 어떤 글리프를 반드시 그려야 하는지, 어떤 글리프를 추가로, 어느 정도 그려야 하는지에 대해 자세히 설명하겠습니다(이에 대해서는 노트 마지막에 :)).
첫 번째 글꼴을 간단하고 간결하게 만드는 것이 좋습니다. 그렇지 않으면 즉시 문자의 초기 버전과 최종 버전을 모두 만들고 키릴 문자를 라틴 알파벳에 추가하면 완료되지 않습니다. 글꼴 (그리고 글꼴을 완성하면 보상을 받을 가능성이 거의 없습니다. 왜냐하면 활자 제작에서는 실수 없이는 할 수 없고 글꼴 품질에 영향을 미치는 작은 얼룩과 세부 사항을 볼 수 있는 능력은 연습을 통해서만 나타나기 때문입니다). 따라서 처음에는 A-Z, a-z, 0-9, 기본 구두점의 표준 세트를 사용하는 것이 가장 좋습니다.
왜 글꼴을 그리는 데 반나절을 투자합니까? 왜냐하면 '파도를 잡는다', 즉 특정 스타일, 글꼴의 분위기를 느낄 때 손이 발달하는 동안 모든 것을 한 번에 그리는 것이 더 낫기 때문입니다. 이는 아마도 손으로 쓴 글꼴에 더 많이 적용될 것입니다(아직 다른 글꼴을 시도하지 않았습니다). 옆으로 치워두고 나중에 나머지 글자를 그리려고 하면 확실히 달라지게 되고, 다시 “손을 조율”하여 일반적인 스타일에 빠지기 시작하는 데 시간이 걸릴 것입니다.
글꼴을 그리는 것은 가장 창의적인 과정입니다. 글꼴을 만드는 것이 창의성과 영감의 찬미에 관한 것이라고 순진하게 믿고 계시다면 서둘러 실망시켜 드리겠습니다. 창의성과 글자 그리기는 글꼴을 만드는 데 걸리는 시간의 최대 20%(보통 더 적은 시간)를 차지합니다. 나머지는 기술입니다. 스캔, 처리, 알파벳 정렬, 조정, 프로그램으로 내보내기, 간격 및 커닝, 코드 설정, 테스트 및 기타 모든 작업입니다. 따라서 글자만 그리고 싶은데 기술적인 부분을 생각하는 것조차 지루하다면 글자를 그리는 것이 좋습니다.
프로세스의 디지털 부분
글꼴이 그려지면 이제 디지털화할 차례입니다. 내 처리 체인은 스캐너 - 포토샵 - 일러스트레이터와 같습니다. 스캐너에서는 최대 설정을 지정하고, Photoshop에서는 대비를 높이고 윤곽을 약간 정리하고, Illustrator에서 추적을 만들고, 알파벳을 찾습니다(즉, 문자를 순서대로 배열하고, 문자를 "조립"하려고 합니다). 모든 것이 어떻게 보이는지 확인하기 위해 몇 마디) 및 깨끗하고 깨끗합니다. 편지를 청소하고 있습니다.
청소 단계에 대해 - '왜 청소해야 하지, 손으로 쓴 글씨체구나'라고 생각하곤 했어요. 그러나 나중에 이 세부 사항이 밝혀졌습니다. 벡터에 포인트가 많을수록 파일 내보내기에 대한 Glyphs(또는 글꼴이 조립되는 다른 프로그램)를 거부하는 등 가능한 모든 방법으로 글꼴에 버그가 발생할 가능성이 커집니다. , 최종 사용자가 오류 없이 사용할 수 없게 됩니다. 따라서 최소한의 도트가 편안함의 핵심입니다. 그렇습니다. 텍스처가 있는 글꼴이라도 여전히 도트를 정리해야 합니다.
저는 Illustrator에서 여러 가지 방법으로 글자를 정리합니다. 첫째, Astute Graphics의 마술 지우개를 사용합니다(부분 유료 플러그인, 내가 말하는 것), 안타깝게도 최소한 대략적인 품질의 무료 대안을 모르겠습니다. 둘째, 표준 일러스트레이터의 연필을 사용하여 윤곽선을 강조 표시하고 더 정확하게 만듭니다.
그 후 내보낼 글꼴을 준비합니다. 이것은 여러 개의 비디오가 있을 가능성이 높은 별도의 큰 이야기이며 문자를 Glyphs로 전송합니다.
좋은 글꼴 프로그램이 중요합니다
글꼴을 조립하는 것, 즉 벡터 문자를 키보드로 입력할 수 있는 기능적인 문자로 바꾸는 것은 이론적으로 다른 프로그램에서 수행할 수 있습니다. Google을 사용하면 모든 취향과 예산에 맞는 인상적인 옵션 목록을 찾을 수 있습니다. 나는 내가 알지 못하거나 한 번도 시도한 적이 없는 것을 추천할 준비가 되어 있지 않기 때문에 여기에 이름을 나열하지 않습니다. 저는 Glyphs 프로그램에서 일하고 있으며 모든 진지한 서체 디자이너(글꼴을 판매하는 사람들)가 Glyphs나 Fontlab에서 글꼴을 만든다는 것만 알고 있습니다. 이는 저렴한/무료 프로그램이 흥미로운 글꼴 스토리를 만드는 데 필요한 모든 옵션을 제공하지 않기 때문일 가능성이 높습니다.
한때 저는 "올바른" 글꼴 프로그램(즉, 매우 사려 깊고 복잡하며 요소가 풍부한 글꼴을 만드는 데 사용할 수 있고 고정되지 않는 글꼴 프로그램)에 즉시 익숙해지기를 원했기 때문에 Glyphs를 선택했습니다. 일부 무료 버전에서는 약 한 달 동안). 나중에 그곳에서 조건부 합자를 만들 수 없다는 사실을 알게 되었습니다. 반면에 저는 Fontlab에 대해 몇 배 더 많은 비용을 지불할 준비가 되어 있지 않았습니다. 분명히 선택은 옳았습니다. 저는 Fontlab에서 Glyphs로 전환한 사람들을 알고 있으며 후자가 더 명확한 인터페이스를 가지고 있다고 말합니다. :)
좋은 글꼴 프로그램은 글자만 작동하는 글꼴로 마술처럼 변환되는 곳이기 때문에 중요합니다. 프로그램에서 언어 지원 생성을 허용하지 않으면 해당 언어 지원을 생성할 수 없습니다. 대체 대문자 세트를 추가할 수 없으면 이미 그렸더라도 추가할 수 없습니다.
Glyphs로 내보낸 후 문자 그룹, 간격(대략 말하면 문자 왼쪽과 오른쪽의 음수 공간), 커닝(특정 문자 쌍 사이의 거리), 언어 지원 추가, 합자(특수 문자) 등 다양한 항목을 설정했습니다. 문자 조합의 변형), 초기 및 최종 옵션(긴 포니테일, 스와시, 장식 등) 및 대안 세트(제안된 경우). 그 과정에서 모든 것이 최종 사용자에게 내가 의도한 대로 문제 없이 작동하도록 코드가 구성되었습니다. 두 문장으로 설명드린 이 단계는 사실 폰트 제작시 시간의 70% 정도 소요되는 작업입니다 :) 그리고 욕심이 나서 간략하게 설명하는 것이 아니라 커닝 정도만 써도 되니까 이보다 3배 더 긴 메모를 작성해도 여전히 충분하지 않습니다. 글꼴에 관한 과정에서 저는 이 모든 사항에 대해 매우 자세히 설명할 것입니다(지금은 "충분히 상세하지 않음"과 "소화하기에 너무 많은 정보" 사이의 경계를 찾으려고 노력 중입니다).
이 글 튜토리얼에서는 여러분이 직접 만든 아이콘을 사용하여 웹사이트에 대한 자신만의 글꼴을 만드는 방법을 알려드리겠습니다. 이를 위해 필요한 것은 벡터 그래픽(Adobe Illustrator 또는 Inkspcape)을 생성하기 위한 프로그램과 인터넷 액세스뿐입니다!자, 시작해 보겠습니다! 기사 마지막 부분에서 이에 사용된 모든 이미지, 아이콘, CSS 글꼴을 다운로드할 수 있습니다.
이 튜토리얼에서는 간단한 작업을 수행하겠습니다. 첫 번째 아이콘에는 일반 별을 그릴 것입니다. 두 번째 아이콘의 경우 내부에 문자 W가 있는 독수리입니다. 그리기가 매우 쉽고 어떤 모양이나 조합도 만들 수 있습니다. 저는 이러한 목적으로 일러스트레이터를 사용했습니다.
창의적인 부분을 완료한 후에는 창작물을 SVG 형식으로 저장해야 합니다. "다른 이름으로 저장"을 클릭하고 파일 형식을 SVG로 선택하세요. 이제 글꼴 생성을 직접 진행할 수 있습니다.
이러한 목적을 위해 우리는 인기 있는 무료 서비스인 IcoMoon을 사용합니다.
가장 먼저 할 일은 새 프로젝트를 만드는 것이므로 왼쪽 상단의 메뉴를 클릭하고 “새 프로젝트”를 클릭합니다. 다음으로, "아이콘 가져오기" 버튼을 클릭한 후 미리 만들어진 svg 파일을 로드합니다. 이 단계를 완료하면 모니터에 다음과 같은 이미지가 표시됩니다.
이제 각 아이콘의 코드(이 경우에는 e600 및 e601), 글꼴 이름, CSS 접두사 등을 변경할 수 있습니다. 이 모든 작업은 "기본 설정"에서 수행됩니다. 또한 "빠른 사용 활성화" 링크를 클릭하면 글꼴이 작동하는 모습을 볼 수 있습니다. 이를 통해 글꼴에 대한 임시 링크를 얻을 수 있을 뿐만 아니라 CodePen에서 코드를 볼 수 있는 옵션도 얻을 수 있습니다.
모든 것을 구성한 후 페이지 하단의 "다운로드" 버튼을 클릭하고 아카이브를 다운로드하세요. 이 아카이브에서는 ttf, eot, svg 및 woff 형식의 글꼴과 해당 글꼴이 포함된 데모 페이지를 찾을 수 있습니다.
사이트에서 아이콘 사용
이제 @font-face를 사용하여 CSS 글꼴을 포함하고 다른 매개변수를 지정하기만 하면 됩니다. 이 매개변수는 모두 다운로드한 아카이브의 CSS 파일에 기록되어 있습니다.
@font-face ( 글꼴 가족: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( 글꼴 가족: "wdm-eagle"; 말하기: 없음; 글꼴 스타일: 일반; 글꼴 두께: 일반; 글꼴 변형: 일반; 텍스트 변환: 없음; 줄 높이: 1; /* 향상된 글꼴 렌더링 =========== */ -webkit-font-smoothing: 앤티앨리어싱됨; -moz-osx-font-smoothing: 회색조; ) .wdm-star:before( content: "\e600"; ) .wdm-eagle:before( content: "\e601"; )
이제 다음과 같이 HTML 코드에서 글꼴을 사용할 수 있습니다.
태그의 클래스 이름 지정 아이콘을 얻습니다.
