sans-serif 글리프를 컨테이너의 왼쪽 테두리에 "touch"시키는 방법 div?

Question

sans-serif 글꼴을 사용할 때 머리글에 문제가 있습니다. 대부분의 글리프는 산 세리프 글꼴로 포함 된 div의 왼쪽 테두리를 "만지지"않습니다. 글꼴이 클수록 글꼴이 더 분명 해집니다. 따라서 헤더는 다음 일반 텍스트와 정렬되지 않은 것처럼 보입니다.

h1 { 
 
     font-family: sans-serif; 
 
     font-size: 72px; 
 
     font-weight: lighter; 
 
    } 
 
    
 
    .container { 
 
     border-left: 1px solid; 
 
    }

<div class="container"> 
 
    <h1>F glyph</h1> 
 
    <h1>T glyph</h1> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</div>

http://jsfiddle.net/mishamsk/j73wwqa5/

어떤 해결 방법은 다음과 같습니다

은 샘플 코드?

Answer 1

문자 및 글꼴 모음, 무게 및 스타일에 필연적으로 의존하는 방식으로 배치를 실험적으로 조정하는 것 외에는 CSS로 수행 할 방법이 없습니다. 또한 글꼴 크기에 따라 다르지만 em 단위를 사용하여 처리 할 수 ​​있습니다. 예를 들어 Arial을 사용하면 (예 : sans-serif이 시스템 종속 기본 글꼴로 매핑 됨) 다음과 같이 작동하지만 "F"이외의 다른 문자 및 다른 글꼴에는 다른 값이 필요합니다.

은 "F"가 꽤 터치를 수행하는 "T"와 같은 왼쪽 테두리에 거의 가깝게되도록 내가 값을 설정 한

h1 { 
 
     font-family: Arial, sans-serif; 
 
     font-size: 72px; 
 
     font-weight: lighter; 
 
    } 
 
    
 
    .container { 
 
     border-left: 1px solid; 
 
    }

<div class="container"> 
 
    <h1 style="text-indent: -0.06em">F glyph</h1> 
 
    <h1>T glyph</h1> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</div>

.

이러한 상황은 규칙이 특정 요소와 매우 관련되어 있으므로 style 요소의 인라인 스타일 시트가 의미가있는 경우 중 일부입니다.

조판 프로그램에는 텍스트 블록의 왼쪽 또는 오른쪽 경계에 글리프 문자을 정렬하는 조정 도구가있을 수 있습니다. 그들은 글리프 (glyphs)의 특성을 알고있었습니다. 그러나 CSS에는 이러한 목적을위한 도구가 없습니다. 글리프가 어떻게 보이는지, 치수가 무엇인지를 "알지 못합니다."