CSS에서 글꼴의 내장 패딩을 무시하는 방법

OTF 형식의 글꼴 파일 세트와 WOFF의 글꼴 파일 세트가 두 가지로 제공됩니다. 불행히도 이들 중 하나는 다른 운영 체제에서 다르게 렌더링되어 내 레이아웃에서 정렬 문제를 일으키는 것으로 보입니다. 다음 코드 및 캡처는 문제를 설명 :CSS에서 글꼴의 내장 패딩을 무시하는 방법

CSS :

div { float:left; padding:0; margin:0 10px; color:#fff; font-size:25px; } 
.galano { background-color:#1a2; font-family: 'Galano Grotesque'; } 
.coves { background-color:#21a; font-family: 'Coves'; }

HTML : 운영 체제에서

이

캡처 : 운영 체제 1

<body> 
    <div class="galano">padding:0</div> 
    <div class="coves" >padding:0</div> 
</body>

캡처 2 :

녹색 배경 글꼴이 필요 이상 상당히 높은 요소를 만드는 큰 고유 패딩을 포함하는 것 방법을 유의하시기 바랍니다. 다른 글꼴로 요소를 정렬 할 때 여분의 공간을 고려하여 그걸로 살아갈 수는 있지만 유감스럽게도 테두리 상자 내의 텍스트 위치가 다른 운영 체제에서 다르기 때문에 조정은 각기 고유해야합니다 운영 체제.

가능한 한 피할 수있는 옵션 중 하나는 조건부 CSS입니다. 제 질문은 다음과 같습니다. CSS 속성을 사용하여 글꼴의 내장 패딩을 무시할 수 있습니까? 글리프)를 사용하여 운영 체제에서 일관되게 내 패딩을 적용 할 수 있습니까?

감사합니다.

출처

2016-09-01 Carvo Loco

어떻게 그 글꼴이 생성 되었습니까? 어떻게 생성 되었습니까? 다른 브라우저 및 OS에서 다른 형식 (WOFF2, WOFF, TTF, SVG, EOT?)을로드합니까? 그것이 옵션이라면, 글꼴 디자이너에게 거대한 문제가 있다고 말해주세요. – FelipeAls

hmmm 좋은 질문. 패딩에 대해서는 잘 모르겠지만'letter-spacing :'을 사용하여 문자 간격을 가지고 놀고 싶을 수도 있습니다. – Roysh

Thanks @FelipeAls. 폰트가 어디에서 왔는지는 모르지만 책자 디자이너가 그것을주었습니다.하지만 그는 그가 사용한 서체를 디자인했다고 생각하지 않습니다. Chrome, FF, IE 11 및 Windows 용 Safari, Mac 용 Chrome 및 Safari, android의 기본 브라우저에서만 OTF 또는 WOFF 파일 만 사용해 보았습니다. 결과는 브라우저와 관련된 OS보다 관련이 있습니다. –

OS에 비해 브라우저가 모순 될 수 있습니다. 선 높이를 정상화 했습니까? 예 :

div { 
    float: left; 
    padding: 0; 
    margin: 0 10px; 
    color: #fff; 
    font-size: 25px; 
    /* Over here! */ 
    line-height: 1.2; 
}

출처

2016-09-01 09:15:17

브람 (Bram)이라는 귀중한 아이디어에 감사드립니다. 안타깝게도, 선 높이를 설정하면 테두리 상자의 높이를 정의 할 수 있지만 테두리 상자 안의 텍스트 레이아웃은 OS마다 다릅니다. 하나는 텍스트를 사용 가능한 영역의 중앙에 수직으로 그리고 다른 하나는 아래쪽 가장자리에 가까운쪽으로 그립니다. 결과는 브라우저와 관련이없는 것 같지만 OS (여러 운영체제에서 여러 브라우저를 시도한 다음 다른 OS에서 두 가지를 시도했습니다). 수동으로 줄 높이를 최소로 설정 한 다음 내 패딩을 적용 할 수 있다고 가정합니다. 유지 보수 악몽! :-( –

CSS에서 글꼴의 내장 패딩을 무시하는 방법

답변

관련 문제