무게를 제외하고 동일한 글꼴이 다른 브라우저에서 다르게 글꼴입니다.

무게를 제외하고 동일한 글꼴이 다른 브라우저에서 다르게 글꼴입니다.

---

텍스트가 Chrome에 표시됩니다. 모든 브라우저에서 이런 방식으로 표시하고 싶습니다. 어떻게 할 수 있습니까?

Safari 에서이 문제를 해결 수 있습니다. -webkit-font-smoothing: antialiased;

크롬 :

Firefox :

h1 {
    font-family: Georgia;
    font-weight: normal;
    font-size: 16pt;
    color: #444444;
    -webkit-font-smoothing: antialiased;
}

<h1>Hi, my name</h1>

그리고 JSFiddle : http://jsfiddle.net/jnxQ8/1/

---

모든 브라우저에서 글꼴이 동일한 지 확인하십시오. 동일한 글꼴이면 브라우저 간 CSS를 사용 하는 문제에 대한 해결책 이 없습니다 .

모든 브라우저에는 오류가 있습니다. 또한 이후 버전이나 다른 OS에서 다를 수 있습니다.

UPDATE : 브라우저와의 차이점을 OS 글꼴을 이해하지 못하는 사람들을 위해, 이 읽기 및 이 .

그러나 대부분의 사람들은 그 차이를 눈에 많이 사용하는 것입니다. 다음과 같은 경우가 아니면 픽셀 단위의 완벽한 크로스 브라우저 디자인은 잊어 버리세요.

1. CSS에있는 모든 브라우저에서 허용되는 텍스트가보기 가능합니다 ...)
2. 이미지 사용 (자원이 많이 필요하고 유지 관리가 어렵습니다)
3. Flash 교체 (일부 프로그래밍이 필요하며 iOS에서 작동하지 않음)

---

업데이트 : 예제 페이지를 확인했습니다. 텍스트로 커닝을 조정하면 도움이 될 것입니다.

text-rendering: optimizeLegibility; 

여기에 더 많은 참조 :

1. 렌더링의 글꼴 일부는 (언급했듯이)에 의해 제어 되고 다른 부분은 . 많은 경우에는 브라우저에서 사용 가능한 속성을 조정하면 동일하지 않습니다.font-smoothing
   text-rendering
2. Chrome의 경우 여전히 OK가 표시되지 않은 텍스트-그림자 해킹을 사용 합니다 . 특히 Windows에서 Chrome 글꼴 논의를 개선해야합니다. 그러나 텍스트 그림자는 Windows XP에서 미쳐 버릴 것입니다. 조심해.

---

브라우저에서 @ font-face 내장 글꼴을 가장 잘 표준화 된 @ font-face 선언 또는 본문 글꼴 스타일에 아래를 포함합니다.

speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

현재 모든 플랫폼과 브라우저 빌드에 대한 보편적 인 수정은없는 선언합니다. 자주 참조했듯이 모든 브라우저 / OS는 서로 다른 텍스트 엔진이 있습니다.

---

여기에 몇 가지 훌륭한 정보가 있습니다 : https://bugzilla.mozilla.org/show_bug.cgi?id=857142

아직 실험 중이지만 지금까지 FF만을 목표로 한 최소 침습 솔루션은 다음과 가변적입니다.

body {
-moz-osx-font-smoothing: grayscale;
}

---

시험 -webkit-font-smoothing: subpixel-antialiased;

---

논의 된 솔루션을 수집하고 테스트했습니다.

Windows10 Prof x64 :

* FireFox v.56.0 x32 
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit

macOs X Serra v.10.12.6 Mac mini (Mid 2010) :

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

Semi (Safari에서 여전히 미세 지방)는 지방이 많은 글꼴을 해결했습니다.

text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac

시각 효과 없음

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

잘못된 시각 효과 :

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

테스트 할 때 중요하게 설정하거나 스타일이 재정의되지 않았는지 확인하는 것을 잊지 마십시오.

---

나는이 문제가있는 많은 사이트를 가지고 있으며 마침내 Firefox 글꼴이 크롬보다 두껍다 는 수정 사항 을 발견했습니다 .

-webkit 수정 옆에이 줄이 필요합니다. -moz-osx-font-smoothing: grayscale;

body{
    text-rendering: optimizeLegibility;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

---

화면의 글꼴 크기에 "포인트"를 사용하는 것은 좋은 생각이 아닙니다. 글꼴 크기에 px 또는 em을 사용해보십시오.

에서 W3C :

글꼴 크기를 pt 또는 기타 절대 길이 단위로 지정하지 마십시오. 플랫폼간에 일관되지 않게 렌더링되며 사용자 에이전트 (예 : 브라우저)로 크기를 조정할 수 없습니다.

---

시도해보십시오 text-rendering: geometricPrecision;.

과 달리 글꼴 text-rendering: optimizeLegibility;크기를 처리하고 마지막은 커닝 및 합활 활성화합니다.

참고 URL : https://stackoverflow.com/questions/5082632/same-font-except-its-weight-seems-different-on-different-browsers