글립 문자가 글꼴 크기 높이의 100 %를 차지하는 글꼴은 어떻게 만듭니 까?

Question

현재 벡터 기반으로하고 싶은 기호 및 기타 그래픽에 사용할 사용자 지정 글꼴을 개발 중입니다. 문제는 글리프가 주어진 글꼴 크기의 전체 높이를 포함하는 글꼴을 만드는 방법입니다.

40px 높이의 블록이 있고 글꼴 크기와 행 높이를 40px로 설정하면 글리프의 맨 위 부분이 블록 상단에 있고 가장 아래 부분이 블록 하단. 즉, 글립은 동일한 글꼴 크기/행 높이를 사용하여 동일한 높이의 블록을 수직으로 완전히 덮어야합니다.

글쎄, 문제는 ... 기준선과 하강을 0으로 설정하고 x 높이, 뚜껑 높이 및 상승을 예를 들어 1500으로 설정하려고했습니다. 그 다음 모든 글리프 이 수직선들 사이에서, 그들은 모두 원하는 방식으로 나타난다. Mac을 제외하고! Mac FF에서는 상단에 약 50 % 오프셋되어 있습니다. Safari와 Chrome에서 "display : block"대신 "display : inline-block"을 설정하지 않는 한 전혀 표시되지 않습니다.

또한 유형 3.2에서 기본 메트릭 등으로 완전히 새로운 글꼴을 설정하려고 시도했습니다. 하강 선이 글립의 가장 아래쪽 끝 부분을 렌더링하는 것으로 판단합니다. 반면에 상단은 모자 높이와 등고선 사이의 어딘가에 있지만 모자 높이에 더 가깝습니다. 하강에서 상승으로 글리프를 그리면 글리프 상단이 잘립니다. 하강에서 캡 높이까지 글리프를 그리면 블록 상단과 글리프 상단 사이에 공백이 있습니다.

적용 할 수있는 "표준"메트릭이 있습니까? 위에서 설명한대로 글리프를 배치하려면 어떻게해야합니까?

그것에 폰트의 사본이 현재 상태는 현재 존재 같습니다
가 https://s3-eu-west-1.amazonaws.com/public-karlis-rode/stack-overflow/Custom-Icon.ttf

EDIT : 동작하는 예제가 여기 될 수는 :
가 https://s3-eu-west-1.amazonaws.com/public-karlis-rode/stack-overflow/index.html

좌측 블록이 포함 내 사용자 정의 글꼴 요소 (경우 a). 다음 블록은 트위터 부트 스트랩 (case b)에서 사용 된 글꼴의 요소를 포함합니다. 마지막 두 블록 (c 및 d)에는 Type 3.2의 기본 설정을 사용하는 테스트 글꼴 요소가 포함되어 있습니다. 첫 번째 시험 요소 (c)는 하강 선에서 가장 낮은 점을 가지며 가장 높은 점은 꼭대기 높이 선에서 나타납니다. 마지막 요소 (d)는 기준선에서 가장 낮은 점을 가지며 x 높이 선에서 최상위 점을가집니다.

이 (우분투이 경우 FF에서) 우분투와 Windows7의 모든 브라우저에서 렌더링 방법 :

이 원하는 동작입니다! 이 Mac에서 Safari에서 렌더링 방법

: 모두 B, C부터

을하고 모든 브라우저에서 동일한 렌더링 D와는 Mac에서 FF에서 렌더링 방법

모든 운영 체제에서 내 자신의 사용자 지정 글꼴이 부족하거나 일관성있게 렌더링하기 위해 메트릭에 모순되는 정보가있는 것 같습니다.

Answer 1

그것은 작업 글꼴을 얻기 위해 적용해야 할 몇 가지 더 통계가 밝혀 모든 플랫폼에서. 트릭을 완료 한 것으로 보이는 것은 hhea/typo ascender을 고급 메트릭 섹션에 설정하는 것입니다.

내가 적용한 설정과 저에게 효과가있는 설정의 스크린 샷을 추가했습니다. 하강 라인은 0로 설정하고 내가 이전에 보이는 글꼴이 번호를 가지고 있기 때문에 상승 라인뿐만 아니라 캡 높이 및 X 높이 모두 1250로 설정되어 나는 1250을 선택했지만 승천과 승강 모두가 동일하다면 중요하지 않은 것처럼 보입니다. 모든 글립 문자가 같은 높이로 설정되어 있기 때문에 x 높이가 실제로 중요하지 않다고 생각합니다. 어쩌면 모자 높이도 필요하지 않습니다, 그것에 의견을 드롭하십시오!

내 FontSquirrel 설정의 스크린 샷을 추가했습니다. 어떤 부분이 필요한지 잘 모르겠지만 안전하게가는 것이 더 좋습니다. "Fix Vertical Metrics"옵션은 원치 않는 "블랙 박스"가 될 수 있으므로 설정을 해제합니다. x 높이 일치는 없음으로 설정되지만 아마도 중요하지 않습니다.

Base64 인 코드 설정입니다. 이 기능이 없으면 다른 도메인의 글꼴을로드 할 수 없습니다. 이는 브라우저가 SOP (Same Origin Policy)를 구현했기 때문입니다. 여기에 더 많은 것 : @font-face fonts only work on their own domain.

글꼴을 만들 때 사용한 것과 동일한 엠 스퀘어 값을 사용해야하는지 정말 모르겠지만 합리적으로 보입니다. 솔직히 말하면 의미가 무엇인지 모르겠다. :-)

이러한 메트릭스를 더 잘 이해할 수 있다고 생각하거나 실수/불필요한 값이 설정되어 있다면 제발 의견을 추가하다! 유형에

글꼴 메트릭 설정 3.2

유형에

고급 폰트 메트릭스 설정 3.2

문양 예

Answer 2

글꼴의 아이콘 높이는 font-size에 의해 결정됩니다.40px로 설정하면 아이콘의 높이가 40 픽셀이됩니다. 이것은베이스 라인 높이와 같은 글꼴 메트릭에 관계없이 발생합니다. 유일한 조건은 아이콘의 디자인이 전체 높이 "아트 보드"1 높이를 차지해야한다는 것입니다. 당신이 연결 한 폰트가 그렇게하므로 문제는 거기에 있지 않습니다.

대부분의 경우 Firefox-Mac 별 문제가 발생합니다. 예를 게시하면 설정에 익숙한 사람들이 도움이 될 수 있습니까?

1 나는 Illustrator에서 "Artboard height"라는 용어를 사용했습니다. 그것은 캔버스의 높이입니다 (왼쪽 아이콘이 오른쪽 아이콘은 전체 높이가 아닙니다)

Answer 3

Icommoon app을 사용할 수 있습니다. 직관적 인 웹 인터페이스에서 기존 글꼴, 가져온 SVG 등의 글리프를 사용하여 사용자 정의 글꼴을 만들 수 있습니다.나는 프로젝트 고유의 아이콘 글꼴뿐만 아니라 Emoji icon font을 직접 만들었다.

Icomoon 앱을 사용하면 각 글리프를 사각형 그리드 내에서 대칭, 회전, 크기 조정 또는 위치 변경 할 수 있습니다. 눈금 자체의 크기를 조정할 수도 있습니다. 해당 인터페이스의 개요는 아래 스크린 샷을 참조하십시오.