글꼴 얼굴 오류하십시오 Nodejs 응용 프로그램 반응 다운로드 글꼴 잘못된 버전 태그

Question

환경을 디코딩하는 것입니다 실패

는

내 CSS는 : 나는 font-style 및 font-weight으로 열기 산세를 위해 두 개의 서로 다른 정의를

@font-face { 
    font-family: 'Open Sans'; 
    src: 
    url('/src/public/fonts/OpenSans-Regular.eot'), 
    url('/src/public/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), 
    url('/src/public/fonts/OpenSans-Regular.woff') format('woff'), 
    url('/src/public/fonts/OpenSans-Regular.woff2') format('woff2'), 
    url('/src/public/fonts/OpenSans-Regular.ttf') format('truetype'), 
    url('/src/public/fonts/OpenSans-Regular.svg') format('svg'); 
    font-style: normal; 
    font-weight: normal; 
} 

@font-face { 
    font-family: 'Open Sans'; 
    src: 
    url('/src/public/fonts/OpenSans-Semibold.eot'), 
    url('/src/public/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'), 
    url('/src/public/fonts/OpenSans-Semibold.woff') format('woff'), 
    url('/src/public/fonts/OpenSans-Semibold.woff2') format('woff2'), 
    url('/src/public/fonts/OpenSans-Semibold.ttf') format('truetype'), 
    url('/src/public/fonts/OpenSans-Semibold.svg') format('svg'); 
    font-style: normal; 
    font-weight: bold; 
} .... 

에 따라 다릅니다

: 보인다 굵은 기울임 등과 같은 요소에 추가 클래스는 acceptable fomat

사용 할 수

웹팩 설정 :

test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
loader: 'url-loader?limit=100000', 

내가 public/fonts 폴더에 글꼴 파일을 가지고, 그것은 일 전까지 잘 작동했지만 지금 우리는 failed to decode downloaded font invalid version tagWOFF 및 TTF에 대한 콘솔 오류의 톤을 얻고있다 파일. 다른 솔루션 link1과 link2을 시도했지만 도움이되지 않았습니다. Chrome의 네트워크 탭에있는 공용 폴더에서 제대로로드되는 글꼴을 볼 수 있습니다.

여전히 이러한 오류가 발생하는 이유는 무엇입니까?

Answer 1

오류를 해결할 수 있습니다. 몇 가지를 조합 한 것입니다. 처음에는 글꼴 파일의 경로였습니다. "빌드"가 발생하지 않은 것처럼 경로를 설정하고있었습니다. Webpack은 릴리스 빌드 후 /assets 아래에 배치 했으므로 경로를 업데이트해야했습니다. src/public/fonts에서 /fonts까지 정적 파일을 자동으로 Assets 폴더 아래에서 확인 + webpack loader에서 버전 관리를 지원하는 정규식 추가 config mimetype for woff