MathJax : 특정 Google 글꼴을 사용할 때 표현의 크기가 잘못 지정되었습니다.

MathJax를 사용하여 렌더링되는 일부 수학 함수로 HTML 파일을 만들려고합니다. 그러나 수학 표현식은 Google 글꼴 (내 경우에는 Lusitana)을 사용할 때 잘못 크기가 지정됩니다. 컴퓨터 또는 일부 다른 Google 글꼴에 설치된 일반 글꼴을 사용할 때 올바르게 나타납니다. 나는 정말로 루시 타나를 사용하고 싶습니다 - 이것이 작동하도록하는 어떤 방법이 있습니까?MathJax : 특정 Google 글꼴을 사용할 때 표현의 크기가 잘못 지정되었습니다.

편집 1 : 내 플랫폼은 Ubuntu 16.04, Chrome 62입니다. Firefox에서는 문제가 발생하지 않습니다. 여기

소스의 렌더링은 아래의 글꼴 루시와 함께 모습입니다 : https://imgur.com/a/OiBmr는

문제를 생산하는 HTML 소스는 다음과 같습니다

<html> 
<head> 
<style> 
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
@import url('https://fonts.googleapis.com/css?family=Lato'); 
@import url('https://fonts.googleapis.com/css?family=Lusitana'); 

body { 
    font-family: "Lusitana", Garamond, Baskerville, "Times New Roman", serif; 
    /* font-family: "Open Sans", Garamond, Baskerville, "Times New Roman", serif; */ 
} 

p { 
    font-size: 20px; 
} 
     </style> 
     <script type="text/javascript"> 
window.MathJax = { 
    tex2jax: { 
     inlineMath: [ ['$','$'], ["\\(","\\)"] ], 
     processEscapes: true 
    }, 
}; 
     </script> 
     <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"> 
     </script> 
    </head> 
    <body> 
     <p> 
     The roots of a quadratic equation, $ax^2 + bx + c = 0$ are given by, $$x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ The expression $\sqrt{b^2 - 4ac}$ is called the discriminant of the equation. If its value is $0$, then the roots are equal, otherwise the roots are distinct. Furthermore, if the discriminant is positive, the roots are real, and if negative, the roots are complex. 
     </p> 
    </body> 
</html>

출처

2017-12-12 ARV

이 루시 나쁜 메타 데이터를 가지고 때문이다.

에서 [본 게시물 (이 도움이 될 : https://groups.google.com/d/msg/mathjax-users/v3W-daBz87k/xjxFFdfQBQAJ를)

MathJax 주변 글꼴의 전 높이로 MathJax 글꼴의 전 높이를 일치하도록 시도하여 배율 인수를 결정합니다. 주변 글꼴의 높이가 올바르게 설정된 경우에만 작동합니다. 모든 무료 글꼴, 특히 모든 Google 웹 글꼴이 아닌 적절한 높이가 있습니다. "Crimson Text"는 그러한 글꼴 중 하나입니다. 크림슨 텍스트로 서식이 단락에
<span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span> 
를 추가,이를 확인하려면 (당신도 MathJax가 완전히는 MathJax 함께 할 아무것도하지 않는 것을 확인하기 위해 제거 할 수 있습니다). 텍스트 옆에 아주 작은 빨간 상자가 보일 것입니다 (글꼴에서 "x"만큼 높을 때).

그래서 MathJax는 "x"가 빨간색 상자와 같도록 글꼴의 크기를 조정하려고합니다. 하지만 MathJax에는 사용하는 스케일의 크기를 제한하는 구성 매개 변수가 있습니다.이 매개 변수는 50 %이므로 글꼴 크기가 정확히 원래 크기의 절반으로 표시됩니다.

가능한 해결책 중 하나는 MathJax에게 주변 글꼴을 일치시키지 않도록 지시하는 것입니다. 잘못된 구성의 다양한 출력 렌더러 :

MathJax.Hub.Config({ 
    "HTML-CSS": {matchFontHeight: false}, 
    SVG: {matchFontHeight: false}, 
    CommonHTML: {matchFontHeight: false} 
});

을이 작은 점점에서 글꼴을 유지하지만,의 글꼴 높이를 일치하지 않는 수학을 의미 당신은 matchFontHeight를 설정하여 그렇게 텍스트의 나머지 부분은 물론 그럴 수도 있습니다. 다른 방법으로는 95 % 같은 것을 할 최소한의 글꼴 크기를 변경 (또는 작동 무엇이든) 수 : 그 중 하나가 트릭을하지 않는 경우

MathJax.Hub.Config({ 
    "HTML-CSS": {minScaleAdjust: 95}, 
    SVG: {minScaleAdjust: 95}, 
    CommonHTML: {minScaleAdjust: 95} 
});

을 참조하십시오.

테스트.

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
 
@import url('https://fonts.googleapis.com/css?family=Lato'); 
 
@import url('https://fonts.googleapis.com/css?family=Lusitana'); 
 

 
.lusitana { 
 
    font-family: "Lusitana", Garamond, Baskerville, "Times New Roman", serif; 
 
} 
 
.opensans { 
 
    font-family: "Open Sans", Garamond, Baskerville, "Times New Roman", serif; 
 
} 
 

 
p { 
 
    font-size: 20px; 
 
}

\t <p class="lusitana">Lusitana: <span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span></p> 
 
    <p class="opensans">OpenSans: <span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span></p>

출처

2017-12-14 17:02:42

MathJax : 특정 Google 글꼴을 사용할 때 표현의 크기가 잘못 지정되었습니다.

답변

관련 문제