Mac / PC에서 글꼴 렌더링 / 줄 높이 문제 (요소 외부)

Mac / PC에서 글꼴 렌더링 / 줄 높이 문제 (요소 외부)

---

디자인

정보 위젯 콘텐츠는 다음과 같이 가운데에 수직으로 정렬되어야합니다.

---

코딩 된 디자인

Windows : Chrome 20 / FF 14 / IE 9

Mac (Lion / Mt. Lion) : Chrome / FF

---

코드

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle;
        padding:3px 15px 0;
    }
        .display p {padding:0;line-height:1em;}
        .time, .date {padding-top:5px;}
            .time p, .date .number {font-size:35px;}
            .time span, .display .month-day, .conditions {
                font-size:14px;
                text-transform:uppercase;
                font-family:"Maven Pro", Arial, sans-serif;
                line-height:1.15em;
                font-weight:500;
            }
            .display .month-day {padding-left:5px;}
            .icon {float:left;padding:0 12px 0 0}
            .display .temperature {font-size:24px;padding:4px 0 0;}
            .display .conditions {text-transform:none;padding:2px 0 0;}
    .lt-ie9 .display { /* IE rgba Fallback */
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
        zoom:1;
    } 

---

문제

코딩 된 디자인의 위 이미지를 보면이 정렬에서 어떻게 보이는지 알 수 있습니다. 추가로 볼 때 텍스트는 Mac의 요소 외부에서 렌더링됩니다.

윈도우

맥

---

노트

Google Web Fonts 스타일 시트를 통해 글꼴을 포함하고 있습니다.

---

테스트

나는 다음을 시도했다 :

• 모든 요소에 줄 높이를 설정합니다.
• 모든 요소에 글꼴 두께를 설정합니다.
• 모든 요소에 높이를 설정합니다.
• 모든 요소의 높이 / 패딩 상단 조합.
• 패딩에 백분율 / em / px를 사용했습니다.

내가 무엇을 시도하든 콘텐츠가 Mac과 PC에서 완벽하게 중앙 정렬되지 않는 것 같습니다.

---

내 질문

It is possible to achieve what I'm trying to do in a simplistic manner?

Should I forgo the display:table-cell; route and set specific heights/paddings on each element and child? I will still run into padding/spacing issues between the two OS's.

What should I categorize this issue under? Line-height? Table-cells? OS? etc...

Thanks in advance!

---

If it is resolved by using a different font (Arial) then the issue is with the font, not with the CSS. As you have noticed font rendering differs between browsers.

One possible solution could be to download the Cutive font (I see it has a SIL license) and then run it through the Font Squirrel font-face generator. In "Expert" mode there is an option to "Fix Vertical Metrics" which might be what you are looking for.

---

I came across this problem with a custom font that had been created for a client's brand. I opened the TTF font in Font Forge. The way I created uniformity with rendering was to adjust the values in Element->Font Info->OS/2->Metrics.

Win Ascent/Descent values appear to work differently to the other values. I had the following values:

Win Ascent: 1000

Win Descent: 0

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

I changed the Win Ascent and Descent values to:

Win Ascent: 750

Win Descent: 250 (notice the positive value)

It appears you need to match the values except in my case I needed to invert the value of Win Descent to a positive one.

I have very limited knowledge about fonts but this did fix my problem. I generated the font as TTF and then ran it through a web font generator. The fonts now render identically on Mac/Windows 7/Android/iOS.

Hope this helps someone.

---

My solution to this (very annoying problem):

• Set all elements to float:left;

• Set explicit line-heights;

Enjoy a victory over cross-browser/platform css ridiculousness.

---

I also came across this issue. Luke's answer helped me. I had to adjust the fonts with FontForge using this settings:

Uncheck all "Is offset" checkboxes and also the "Really use Typo metrics" checkbox. I had most problems with Firefox and IE. Playing around with the value of "Win Descent" fixed it for those two browsers.

---

Part of the problem may be in the way Windows/Mac OSX renders fonts. Specifically those that are brought in via @font-face. Have you tried switching out which font formats are being used?

---

I witnessed the same issue, with a custom font (Trade Gothic) served by FastFonts.

Windows did what it should have. But all other browsers on Linux based machines, Mac, iOS, Android suffered the problem.

My only solution was to match on the user agent, and namespace the body tag with .not-win

Then my styles could override the line-height specific to non-windows devices.

---

Since you said in your comment to Jordan Brown that using Arial makes the alignment perfect, this is a font issue. It is likely that whoever created your font did not set the Ascent value properly.

If you have the TTF, upload it to FontSquirrel, select the "Expert" option and then keeping all default options. The one that fixes it I believe is "Fix Vertical Metrics." but I had issues when changing the defaults so I recommend keeping them as-is.

Now the font line height renders the same on MAC and PC (it worked for me).

---

It's caused by font format history and Windows/Mac wars, there are different ways to compute line height and if they are not synced in the font you use things will go wrong on some systems

You need to fix your font (if the licensing allows it) or switch to one without this problem

See http://www.webfonts.info/node/330 (warning, this is an infomercial even if the tech info is true)

Better, not to make your design depend on an exact value here

---

The Mac correctly displays the lengths below the baseline as belonging to line height. It seems that OS X counts bottom up whereas Windows calculates from the Top.

Since 1em is the width of the capital M of the used font it is usually smaller than the font's overall height.

선 높이를 요소 높이와 동일하게 설정해 보셨습니까? 이것은 일반적으로 이러한 종류의 문제를 해결하는 데 도움이됩니다.

참고 URL : https://stackoverflow.com/questions/11726442/font-rendering-line-height-issue-on-mac-pc-outside-of-element