다른 글꼴 모음에서 글꼴 크기를 표준화하는 방법

내 웹 사이트에서 Oswald (http://www.google.com/fonts/specimen/Oswald) 및 Bebas Neue (http://dharmatype.com/dharma-type/bebas-neue.html)를 사용하고 있습니다.다른 글꼴 모음에서 글꼴 크기를 표준화하는 방법

두 웹 사이트 모두 font-face (Google 웹 글꼴을 통한 오스왈드)으로로드되지만 동일한 과정입니다.

그러나 동일한 글꼴 크기 정의 (예 : font-size:14px은 매우 다른 두 개의 크기를 렌더링)를 사용하면 글꼴 자체의 높이가 크게 달라집니다.

페이지가 작동하도록 동일한 크기로 렌더링해야합니다.

두 가지 질문 : i)이 차이를 일으키는 원인과 ii)이를 해결하기 위해 수행 할 수있는 작업은 무엇입니까? IE8을 준수하는 것이 바람직합니다.

감사

출처

2013-08-26 alias51

글꼴을 만들었다면 각 문자에 예약 된 공간이 있고 그 공간에서 어떤 크기로든 문자를 만들 수 있기 때문에 불가능하다고 생각합니다. –

(글꼴 크기를 기준으로) 문자의 크기는 글꼴 디자이너의 결정에 따라 달라집니다. 이것은 기본적으로 글꼴 조합을 선택할 때 고려해야 할 사항입니다. 원칙적으로 글꼴은 잘 설계되지 않은 한 잘 어울리지 않습니다.

font-size-adjust 속성은이 문제를 해결하기위한 것입니다. 그러나 Firefox에서만 지원되며 깨진 방식으로 지원됩니다.

출처

2013-08-26 16:45:14

답변 1 : 글꼴의 글리프는 캔버스에 배치됩니다. 서로 공백을 둘 필요가 있습니다. 흰색의 양은 다릅니다. 그 이유 중 하나는 x 높이와 오름차순 크기 (bdfhklt)와 디 센더 (gjqpy) 사이의 비율입니다. 글꼴이 상대적인 작은 x 높이 (큰 (as/de) 띠 모양)를 갖는 경우 상대적 x 높이가 상대적으로 큰 글꼴보다 글리프 주위에 흰색이 많습니다. 흰색의 양에 영향을 미치는 변수가 더 많습니다. 대문자/소문자 비율 및 글꼴 크기.

답변 2 : 아무 것도 고장났습니다. CSS를 사용하고 글꼴 크기를 상대적으로 설정하고 텍스트 크기를 수정할 수 있습니다.

x-height and capital height

당신은 그리 정렬 위치를 확인하는 브라우저 창의 가장자리에 이미지를 스크롤 할 수 있습니다.

최고 : 없음 조정

중학교 : 같은 X 높이. 이것은 좋아 보인다!

아래 : 같은 자본금. 이것은 글꼴 중 하나가 모두 대문자이므로 필요한 것입니다.

HTML :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <style> 
     p 
     { 
      border: 1px solid red; 
      line-height: 1EM; 
      font-size: 600%; 
      margin: 0 0 0.1EM 0; 
     } 

     .arial { font-family: 'Arial'; } 
     .times { font-family: 'Times New Roman'; } 

     .times_same_x_height { font-size:116%; } 
     .times_same_capital_height { font-size:108%; }   

     .font_stack { font-family: "Does not exist", serif; } 

    </style> 
</head> 
<body> 

    <p> 
     <span class="arial">xH</span> 
     <span class="times">xH</span> 
    </p> 

    <p> 
     <span class="arial">xH</span> 
     <span class="times times_same_x_height">xH</span> 
    </p> 

    <p> 
     <span class="arial">xH</span> 
     <span class="times times_same_capital_height">xH</span> 
    </p> 

</body> 
</html>

주 0 : 그것은 바로 보이는 경우, 그것은 권리입니다. x 높이를 사용하지 말고 x 높이를 사용하십시오. 때때로 크기의 명확한 차이는 글꼴 조합을보다 조화롭게 만듭니다. 눈 (및 두뇌)을 사용하십시오.

참고 1 : 동일한 단락에 텍스트를 넣었습니다. 기준선을 맞추기 때문에 해냈습니다. 그러나 텍스트 요소가 서로 분리되어있을 가능성이 큽니다. 오른쪽에 line-height 및 margin을 위치 시키십시오. 상대 값을 사용하십시오. 그리고 때로는 약간의 기준선 이동 : .shift { top: -.01EM; position:relative; }

참고 2 : 글꼴이없는 경우.font_stack은 다음으로 좋은 글꼴을 사용합니다. 멋진 글꼴이 스택의 모든 글꼴에 적용된다는 사실을 깨달으십시오!

팁 : 글꼴의 무게를 약간 변경하려는 경우. 색상을 조금 더 밝게 만들 수 있습니다. 예 : 검은 색에서 매우 어두운 회색까지. 이렇게하면 굵게 보일 것입니다.

보너스 : IE는 준수해야합니다.

의견에 감사드립니다.

출처

2013-08-26 22:48:19 allcaps

다른 글꼴 모음에서 글꼴 크기를 표준화하는 방법

답변

관련 문제