여러 글꼴 모음에서 텍스트가 대략 같은 크기로 표시되도록하려면 어떻게합니까? 수동으로는 할 수없고 소프트웨어로해야합니다.
내 웹 앱에서 사용자는 다양한 글꼴 모음 (초보자를위한 모든 Google 웹 글꼴) 중에서 선택할 수 있으며 선택한 글꼴의 미리보기를 제공해야합니다 (예 : 16px에 해당하는 크기). 문제는 서로 다른 글꼴의 시각적 크기가 매우 다르다는 것입니다. 예를 들어 Tangerine은 Roboto 또는 Open Sans의 절반 크기로 나타나고 미리보기 목록의 글꼴 중 하나가 다른 글꼴의 절반 크기를 렌더링 할 때 이상하게 보입니다!
다른 CSS 글꼴 크기 측정 단위 (예 : px, em, ex, inherit 등)를 시도했지만 크기를 정렬하지 않으므로 거의 모두 동일한 크기로 표시됩니다.
나는 'ex'가 그것을해야한다고 생각했지만 글꼴이 시각적으로 비슷한 크기로 보이도록 만드는 데 아무런 영향을 미치지 않는 것 같습니다 (내 이해는 그렇게해야합니다). CSS font-size-adjust 속성도 작동하지 않습니다. 처음에는 Firefox 일뿐입니다.
아래 예제 코드. 솔루션 프런트 엔드 (예 : Javascript, Bootstrap 3 및 JQuery 사용) 또는 백엔드 (제 경우에는 PHP)를 수행 할 수 있습니다.
어떤 제안이라도 환영합니다! 감사합니다.
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>
</head>
<body>
<span style="font-family: 'Open Sans', sans-serif; font-size: 4ex; font-weight: normal;">Open Sans</span><br>
<span style="font-family: 'Roboto Slab', serif; font-size: 4ex; font-weight: normal;">Roboto</span><br>
<span style="font-family: 'Tangerine', cursive; font-size: 4ex; font-weight: normal;">Tangerine</span><br>
<span style="font-family: 'Josefin Slab', serif; font-size: 4ex; font-weight: normal;">Josefin Slab</span><br>
<span style="font-family: 'Old Standard TT', serif; font-size: 4ex; font-weight: normal;">Old Standard</span><br>
</body>
</html>
JS Fiddle ( http://jsfiddle.net/c2hjr5qz/ ) 내에서 이러한 글꼴을 실행하면 모든 글꼴이 동일한 너비로 보이지만 모두 올바르게 정렬되도록 할 수있는 한 가지 방법 line-height은 개체 를 설정하는 것 입니다. 그렇게
span{
display:inline-block;
line-height:48px;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다