휴대 기기에 font-family가 적용되지 않습니다.

Question

font-family 속성에 문제가 있습니다. css입니다. 특정 글꼴을 사용하여 스타일을 지정하려는 제목이 있습니다. @fontface을 사용하고 있습니다. 내 바탕 화면에 잘 작동하지만 iPhone 및 iPad에 내가 몇 가지 표준 글꼴을 (나는 시간이있을 수도 있지만 확실하지 않다) 얻을. 나는 약간 연구를하고 ttf 등등 다른 체재를 시도했다 ... 그러나 아직도 일하고 ​​있지 않았다. 마침내, 저주 받았고, 나는 다른 CSS 폰트를 다른 시스템 폰트로 바꾸려고 시도했지만, 폰은 여전히 ​​그것들을 인식하지 못하고있다. 기본적으로 하나의 글꼴이 붙어 있습니다.

세 첫번째 이미지가 나는 데스크톱 버전에 적용했습니다 다른 글꼴 가족이었다 다음은 바탕 화면 글꼴의 몇 가지 예입니다. @fontface을 사용하는 시스템 글꼴, Google 글꼴 및 맞춤 글꼴이 있습니다. 모든 일.

네 번째 이미지는 각 글꼴에 대해 iPhone 및 iPad에 모두 표시되는 것입니다. 항상 같은 것. 무슨 일이 일어나고있는거야? 어떤 제안도 감사합니다.

는

사용자 지정 글꼴에 대한 나의 코드는 다음과 같습니다

@font-face {font-family: QuaestorSans; 
      src: url("fonts/QuaestorSans-Rg.otf") format("opentype"), 
       url("fonts/QuaestorSans.ttf") format("opentype"); 
} 


.title{ 
    font-family: QuaestorSans; 
    font-size: 2em; 
    letter-spacing: 1.4px; 
} 

html로

앨리스 지구에 하늘 soyer

문자를 페이드 약간의 애니메이션이 있습니다 안으로,하지만 나는 그렇게 생각하지 않았을거야. 폰트 패밀리에 테러 (및 휴대 기기에서만?). 당신이 웹 사이트를 체크 아웃하려면

은 그것의 alicesoyer.com

가 글꼴 - 가족을위한 단 하나의 규칙이지만, 데스크톱과 모바일 사이트를 테스트하는 경우 (내가 아이폰에 테스트입니다 및 지금 iPad) 당신은 다른 가족을 볼 수 있습니다. 감사합니다

Answer 1

모바일 기기에 적합한 글꼴 형식을 가지고 있지에 의한 대부분의 경우, 글꼴에 대한 올바른 코드를 생성 할 https://www.fontsquirrel.com/tools/webfont-generator 같은 서비스를 사용하려고하면

Answer 2

그냥 예 (이 형식을 시도 사용하고 font- 가족) ..

@font-face { 
font-family: 'LatoRegular'; 
src: url('../fonts/LatoRegular.eot'); 
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'), 
    url('../fonts/LatoRegular.woff2') format('woff2'), 
    url('../fonts/LatoRegular.woff') format('woff'), 
    url('../fonts/LatoRegular.ttf') format('truetype'), 
    url('../fonts/LatoRegular.svg#LatoRegular') format('svg'); 

}
일부 브라우저는 다른 형식을 필요로하기 때문에이 작업을해야 모든 형식을 사용합니다.