CSS를 통해 로컬로 글꼴로드

Question

저는 작은 정적 웹 사이트가 있으므로이 USB를 통해 열 수 있도록 USB로 이동해야합니다. CSS 통해

나는 글꼴에 대한 그 규칙 (사용자 정의 글꼴인가) 정의 :

@font-face { 
    font-family: 'MyFont_SerifReg'; 
    src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype'); 
    src: url('/assets/fonts/MyFontSerifReg.eot'); /* IE9 Compat Modes */ 
    src: url('/assets/fonts/MyFontSerifReg.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ 
    src: url('/assets/fonts/MyFontSerifReg.woff') format('woff'); /* Pretty Modern Browsers */ 
} 

@font-face { 
    font-family: 'MyFont_SansBol'; 
    src: url('/assets/fonts/MyFontSansBol.ttf') format('truetype'); 
    src: url('/assets/fonts/MyFontSansBol.eot'); /* IE9 Compat Modes */ 
    src: url('/assets/fonts/MyFontSansBol.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ 
    src: url('/assets/fonts/MyFontSansBol.woff') format('woff'); /* Pretty Modern Browsers */ 
} 

@font-face { 
    font-family: 'MyFont_SansLig'; 
    src: url('/assets/fonts/MyFontSansLig.ttf') format('truetype'); 
    src: url('/assets/fonts/MyFontSansLig.eot'); /* IE9 Compat Modes */ 
    src: url('/assets/fonts/MyFontSansLig.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ 
    src: url('/assets/fonts/MyFontSansLig.woff') format('woff'); /* Pretty Modern Browsers */ 
} 

@font-face { 
    font-family: 'MyFont_SansDem'; 
    src: url('/assets/fonts/MyFontSansDem.ttf') format('truetype'); 
    src: url('/assets/fonts/MyFontSansDem.eot'); /* IE9 Compat Modes */ 
    src: url('/assets/fonts/MyFontSansDem.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ 
    src: url('/assets/fonts/MyFontSansDem.woff') format('woff'); /* Pretty Modern Browsers */ 
} 

body { 
    font-family: 'MyFont_SansLig'; 
} 

h2 { 
    font-family: 'MyFont_SerifReg'; 
    font-size: 40px !important; 
} 

h4 { 
    font-family: 'MyFont_SansBol'; 
    line-height:1.5em; 
} 

p { 
    font-family: 'MyFont_SansLig'; 
    font-size:16px; 
} 

b { 
    font-family: 'MyFont_SerifReg'; 
    font-size:18px; 
} 

을 그리고 웹 사이트를 방문하는 동안 글꼴을로드하는 데 아무런 문제가 없을 통해 우리

편집 :

콘솔에서 화면, 폴더 "소스"

에로드되지 않습니다 "글꼴"것 같은데

로컬 웹 사이트를로드하려고 할 때만 문제가 발생합니다. 글꼴이로드되지 않습니다.

내가 쓴 글은 무엇이 맞습니까?

Answer 1

경로 문제 일 수 있습니다. (html로 같은 장소에서 폴더가 자산을 가정) 상대 경로를 사용하는 것을 시도하십시오 : ../assets/fonts/MyFontSerifReg.ttf

이

Answer 2

@font-face { 
    font-family: 'MyFont_SerifReg'; 
    src: url('/assets/fonts/MyFontSerifReg.ttf') format('truetype'), 
     url('/assets/fonts/MyFontSerifReg.woff') format('woff'); 
} 

에 있는지 확인하십시오 문제 해결 가이드 아래 교차 확인 : 체 { 폰트 패밀리 :

1. 경로 URL()
2. 예를 들면 아래와 같은 스타일을 적용 제공 'MyFont_SerifReg를'; // 규칙에 정의 된 동일한 이름 }
3. 규칙이 HTML로 정의 된 CSS 파일의 참조를 추가합니다.