기울임 꼴 "g"문자 오른쪽 잘라지고

나는 내 CSS에 대한 다음과 같은 구조를 가지고 :기울임 꼴 "g"문자 오른쪽 잘라지고

index.html 
css 
--fonts 
----roboto 
------roboto-italic-demo.html 
------roboto-italic-webfont.woff 
------roboto-italic-webfont.woff2 
------stylesheet.css 
--main.css

stylesheet.css이

@font-face { 
    font-family: 'robotoitalic'; 
    src: url('roboto-italic-webfont.woff2') format('woff2'), 
     url('roboto-italic-webfont.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
}

roboto-italic-demo.html 전체와 데모 페이지입니다 다음 CSS를 포함 알파벳 문자는 font-family: 'robotoitalic';을 사용하여 표시됩니다. 여기서 g는 꼭 그래야합니다.

main.css

는 다음 CSS

@font-face { 
    font-family: 'roboto'; 
    src: url('fonts/roboto/roboto-bolditalic-webfont.woff2') format('woff2'), 
     url('fonts/roboto/roboto-bolditalic-webfont.woff') format('woff'); 
    font-weight: bold; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'robototest2'; 
    src: url('fonts/roboto/roboto-italic-webfont.woff2') format('woff2'), 
     url('fonts/roboto/roboto-italic-webfont.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
}

index.htmlmain.css 스타일을 포함을 포함한다. font-family: 'roboto'; font-style: italic;을 사용하면 g 문자의 오른쪽이 잘립니다. font-family: 'robototest2';을 사용하면 g 문자의 오른쪽도 잘립니다. 다시 확인 실제로 사용하던를 만들기 위해

다시 다운로드 roboto-italic-webfont.woff & & roboto-italic-webfont.woff2
가을로 "Comic Sans MS"을 넣어 : 여기

내가 문제를 해결하기 위해 노력 무엇 roboto 또는 robototest2
추가 된 자간

패딩

와 범위 내에서 g 문자를 배치 편집 :

이 질문은 중복으로 표시되었습니다. 링크 된 질문은 컨테이너에서 튀어 나와있는 텍스트를 가리 켰습니다.이 태그는 태그 내의 위치와 상관없이 문자가 잘리는 것에 관한 것입니다.

출처

2016-12-23 Déric Dallaire

http : // stackoverflow.com/questions/26296434/html-italic-letters-protrude-from-their-container-and-may-be-next-co – Vcasso

예를 들어,이 HTML은

<p><em>This g is being cut off on its right side</em></p>

결과는 또한 Roboto로, 일정한 무게의 기울임과 같은 문제를 가지고 있었다. Roboto의 버전은 Font Squirrel에서 자체 호스팅 및 다운로드 한 버전입니다.

Roboto의 Google 호스팅 버전을 사용해 보았는데 "g"가 올바르게 렌더링되었으므로 폰트의 버전이 나와 있어야합니다. 별도의 스택 오버플로 문제 인 https://stackoverflow.com/a/15976457/1786681에서 Font Squirrel의 웹 키트 생성기에 자신의 TFTP를 업로드하고 "전문가"옵션을 선택하고 "Em Square Value"를 "2162"로 변경하는 것만 빼고 모든 기본값을 남기는 것이 좋습니다. ". Google에서 Roboto의 .ttf 파일을 다운로드하고 이러한 단계를 거쳤습니다. 이탤릭체 "g"가 이제 아름답게 렌더링됩니다!

출처

2017-07-12 18:07:32 Brenda

비슷한 방식으로 문제를 해결했습니다. –

기울임 꼴 "g"문자 오른쪽 잘라지고

답변

관련 문제