2017-05-12 7 views
2

제목과 마찬가지로 font-face가 인터넷에서 작동하지 않지만 로컬에서 작동 중이므로 왜 그런지 이해하지 못합니다. 누군가 나를 도울 수 있습니까? 다음은 내 코드입니다 :글꼴 - 얼굴은 로컬에서 작동하지만 서버에서는 작동하지 않음

당신이 당신의 PC 또는 Mac이 브라우저에 있지만 설치되지 않은 것 시스템에 표시 할에 글꼴을 설치 한 경우

@font-face { font-family: 'ocraextended'; src: url('font/OCRAEXT.ttf') format('truetype'); }

+0

Google/Firefox 개발자 콘솔에 오류가 있습니까? 개발자 콘솔의 네트워크 탭에서 글꼴 로딩의 HTTP 상태 코드를 확인하거나 익숙하지 않은 경우 탭 화면을 게시하십시오. 또는 단순히 귀하의 웹 사이트 URL을 게시하십시오. – Dash

답변

2

. 웹 페이지와 함께 다른 글꼴 파일을 업로드하고 css에서이 글꼴 파일을 참조해야합니다.

예 :

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('font/OCRAEXT.eot'); /* IE9 Compat Modes */ 
    src: url('font/OCRAEXT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('font/OCRAEXT.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('font/OCRAEXT.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('font/OCRAEXT.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('font/OCRAEXT.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

또 다른 옵션 구글 글꼴을 사용하는 것입니다.

<link href="https://fonts.googleapis.com/css?family=Overpass+Mono" rel="stylesheet"> 

또는 CSS에서 다음

@import url('https://fonts.googleapis.com/css?family=Overpass+Mono'); 

당신이 할

HTML에서 : (많은 파일 및 글꼴 형식없이 호환 크로스 브라우저)를 사용하여 무료로 쉽습니다 html 요소는 다음과 같은 글꼴을 사용합니다.

h1 {font-family: 'Overpass Mono', monospace;} 

PS : 모노 간격 글꼴은 원래 기계 가독성을 갖도록 만들어졌습니다. 인간이 읽을 수있는 최고의 글꼴이 아닙니다. 그러나 어이, 당신은 당신의 디자인에 맞는 것을 가장 잘 압니다.

관련 문제