I는 다음과 같은 마크 업 가지고라인 높이 수직 정렬 폰트면
<div class="blockSection">
<h5>Title of the section</h5>
...
</div>
는 이제 .blockSection 대한 H5는 고정 된 높이 및 배경 이미지 40px를 가진다. 텍스트를 세로로 정렬하기 위해 텍스트가 2 줄 이상 끊어지지 않기 때문에 항상 높이와 동일한 줄 높이를 설정합니다. 하지만 문제는 font-face 폰트를 사용하고 있는데 Mac에서 Safari를 세로로 맞추고 싶지 않습니다. Windows에서 IE는 좋아 보인다.
아무도 브라우저에 다른 선 높이를 적용하지 않고도 올바르게 만들 수있는 방법을 알고 있습니까?
conditional comments처럼 들릴 것 같습니다. 한 줄의 높이 내에서 IE 전용 스타일 시트를 만들고 다른 브라우저에서는 선의 높이가있는 기본 스타일 시트를 만듭니다.
각기 다른 브라우저에 대해 라인 높이를 설정하고 싶지는 않지만 IE가 원하는대로하고 다른 브라우저는 그렇지 않은 경우이 방법이 가장 좋습니다.
h5에 display: table-cell 및 vertical-align: middle을 사용하는 수직 중심 맞춤 솔루션 (한 가지 해결책)은 다음과 같습니다.
해커가 아닌 다른 브라우저 조합을 타겟팅하는 데는 & OS입니다.
"모든 웹 글꼴에 똑같이 잘 작동하는 이상적인 선 높이가 없습니다. 각 서체는 압축 여부에 상관없이 글자 간격이 빡빡한 지 또는 느슨한 문자인지에 따라 디자인 속성에 따라 다른 기본 줄 높이가 필요합니다. 오름차순 또는 디 센더가 x 높이 등과 비교하여 길거나 짧은 지 여부 " - Webfonts.info
Webfonts에서 글꼴의 사용 허가를받은 경우에는 줄 높이 옵션을 사용하여 제작할 수있는 키트 작성기가 있습니다. "테두리 상자"는 내가 가지고있는 글꼴 하나에서 작동했습니다. 여기에 더 많은 정보 : http://webfonts.info//webfonts-know-how/part-3-line-height-options-kitbuilder
글꼴이 브라우저에서 다르게 & OS를 렌더링 할 수 있기 때문에, 조건부 스타일 시트보다 더 나은 다른 방법으로, 당신은 당신이 브라우저 & OS의 조합을 감지 할 수 있습니다이 jQuery 플러그인을 시도하고 클래스를 적용 할 수 그것에. 이상적은 아니지만 옵션입니다.
http://www.icavia.com/2010/09/solving-font-face-alignment-issues/
UPDATE : 시도하는 또 다른 옵션은 Font Squirrel Webfont Generator입니다. 문제의 글꼴을 사용할 권한이있는 경우 전문가 모드에서이 생성기를 사용하고 "수직 측정 값 고정"옵션이 선택되어 있는지 확인하십시오.
결과가 동일합니다 ... – blackhandr
http://jsfiddle.net/ux2eE/ – RoToRa
사실, 기본 웹 글꼴로 완벽하게 작동하지만 내 글꼴 - 얼굴은 아닙니다 :) – blackhandr