다운로드 한 글꼴을 해독하지 못했습니다 나타납니다. 그러나

이것은 Chrome에서 발생하는 오류이며 불행히도 검색하면 많은 결과를 얻지 못했습니다. 글꼴 자체가 올바르게 나타납니다. 그러나 여전히이 오류 / 경고가 나타납니다. 보다 구체적으로 이것은 전체 경고입니다.

“다운로드 한 글꼴을 해독하지 못했습니다 :
http : // localhost : 8000 / app / fonts / Lato / “

내 CSS는 다음과 같습니다.

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

나는 단지 이해하지 못한다. 글꼴이 올바르게 적용되지만 항상 경고가 표시됩니다. 사용하려고 Sans-Serif하면 글꼴이 일반 브라우저 글꼴로 되돌아갑니다. 그래도 확실하지 않으며 검색 후에도 아무것도 찾지 못했습니다. 감사!

편집하다

같은 패밀리의 다양한 글꼴 파일이 있습니다. 나는 그들을 모두로드하려고합니다. 글꼴 파일은 .ttf입니다. 나는 로컬 폴더에서 그들을로드하고, 다양한 글꼴 파일과 같은,있다 Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttf등

답변

CSS 규칙에서 파일의 확장자를 추가해야합니다. 가능한 가장 깊은 지원을 제공하는이 예는 다음과 같습니다.

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

편집하다:

“다운로드 한 글꼴을 디코딩하지 못했습니다”는 글꼴이 손상되었거나 불완전하다는 것을 의미합니다 (메트릭, 필요한 테이블, 이름 지정 레코드, 가능한 수백만 가지 누락).

때때로이 문제는 글꼴 자체에 의해 발생합니다. Google 글꼴은 올바른 글꼴을 제공하지만 글꼴이 필요한 경우 Transfonter 를 사용 하여 모든 글꼴 형식을 생성합니다.

때때로 FTP 클라이언트가 파일을 손상 시켰습니다 (이 경우 로컬 PC에 있기 때문에). ASCII가 아닌 바이너리로 파일을 전송하십시오.

답변

Visual Studio에서 비슷한 문제가 발생하여 잘못된 것으로 인해 발생했습니다. url() 글꼴 문제 문제의 글꼴 경로가 되었습니다.

변경 한 후이 오류가 발생하는 것을 멈췄습니다 (예 :).

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

이에:

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");

답변

format ( ‘woff’)에서 format ( ‘font-woff’)으로 변경하면 지금이 문제를 해결하는 데 도움이됩니다.

Germano Plebani 답변에서 약간의 변경 사항을 변경하십시오.

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

브라우저 소스가 열 수 있는지와 유형이 무엇인지 확인하십시오

답변

서버가 올바른 mime / type을 사용하여 글꼴 파일을 전송하고 있는지 확인하십시오 .

최근에 일부 글꼴 마임 유형이 바닐라 파일에 없기 때문에 nginx를 사용하는 것과 동일한 문제 가 /etc/nginx/mime.types있습니다.

누락 된 MIME 유형을 필요한 위치에 다음과 같이 추가하는 문제를 해결했습니다.

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

nginx에서 mime.types 확장을 위해 이것을 확인할 수도 있습니다.
기본 nginx mime.types 파일 확장

답변

type="text/css"링크 태그 를 추가 해야했습니다. 나는 그것을 다음과 같이 바꿨다.

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

에:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

변경 한 후에 오류가 사라졌습니다.

답변

방금 같은 문제가 있었고 변경하여 해결했습니다.

src: url("Roboto-Medium-webfont.eot?#iefix")

에

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

답변

나 에게이 오류는 https를 사용하여 Google 글꼴을 참조했을 때 발생했습니다. http로 전환하면 오류가 사라졌습니다. (그리고 네, 그 원인인지 확인하기 위해 여러 번 시도했습니다)

그래서 나는 바꿨다.

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

에:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);