CSS 변환 흐리게 텍스트

다음 CSS는 크롬에서 글꼴 흐리게 렌더링합니다 어떻게 내 글꼴을 영향을받지 않게 할 수 있습니까? 이 때문에 종종 자신의 복합 층으로 상품을 제공하는 translateZ(0)와 Z 평면 정박 정류 이유로로 될 수CSS 변환 흐리게 텍스트

.md-modal { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 50%; 
    max-width: 630px; 
    min-width: 320px; 
    height: auto !important; 
    z-index: 2000; 
    visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform: translateX(-50%) translateY(-50%); <This line 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); <-- This line 
}

출처

2014-12-10 D-W

데모를해야합니다. 그것은 당신이 사용하고있는 글꼴 일 수도 있습니다. –

그 글꼴이 아니라 그 변환 –

맞춤 글꼴 & 크롬! = 예리한 바삭 바삭한 텍스트 – Mark

- 그러나 (조합) 아래 수도 또한 procide 결과 :

backface-visibility: hidden; 
transform: translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);

출처

2014-12-10 11:27:39 SW4

안녕하세요, 이것은 더 이상 모달이 더 이상 중심에 있지 않다는 것을 의미합니다 –

@DW .... 당신이 질문에 가지고있는 제한된 코드로, 나는 두려워합니다. 조금 정확한 대답을 제공하기가 어렵다. 변형 속성을 확장해야하며 위의 값으로 대체하지 않아야한다. S – SW4

반올림 관련 문제는 다음 문서를 참조하십시오.

http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/

시도해보십시오.

function centerTarget(tar){ 
    var y = Math.ceil(tar.height()/2), 
     x = Math.ceil(tar.width()/2); 

    tar.css('transform','translateX(' + x + 'px) translateY(' + y + 'px)'); 
}

여기서 tar는 jquery 객체입니다. 이 하다니

진정한 픽셀 내를 중심으로되지 나 :

출처

2015-09-21 06:23:04 Spaceman

그냥 내 두 센트 충분히 가까이 있도록. 당신이 당신의 CSS에서 rem 년대를 사용하지 않는

transform: translate3d(-50%, -50%, 0) scale(2, 2); 
zoom: 0.5;

이것은 오래 작동합니다. 규모가 크기가 커지기 때문에 rem 단위도 증가하여 이상한 부작용을 만듭니다.

출처

2017-01-05 17:43:49

덕분에 –

REM 사용을 중단하지 마라. 대신 flexbox를 사용하여 콘텐츠를 정렬하십시오. 'display : flex; justify-content : 센터; align-items : 센터; –

CSS 변환 흐리게 텍스트

답변

관련 문제