Không thể giải mã phông chữ đã tải xuống

Đây là một lỗi tôi gặp phải trong Chrome và không may tìm kiếm nó đã không mang lại cho tôi nhiều kết quả. Các phông chữ xuất hiện chính xác. Tuy nhiên tôi vẫn nhận được lỗi / cảnh báo này. Cụ thể hơn, đây là cảnh báo đầy đủ:

"Không thể giải mã phông chữ đã tải xuống: http: // localhost: 8000 / ứng dụng / phông chữ / Lato / "

CSS của tôi là:

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

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

Tôi chẳng hiểu gì. Phông chữ được áp dụng chính xác, nhưng cảnh báo luôn ở đó. Cố gắng sử dụng Sans-Seriflàm cho phông chữ trở lại phông chữ trình duyệt bình thường, vì vậy đó có thể là nó, nhưng tôi không chắc chắn, và thậm chí sau khi tìm kiếm tôi không tìm thấy gì. Cảm ơn!

BIÊN TẬP

Có nhiều tập tin phông chữ khác nhau, tất cả từ cùng một gia đình. Tôi đang cố gắng tải tất cả. Các tập tin phông chữ là .ttf. Tôi tải chúng từ một thư mục địa phương, và có rất nhiều font-file, như Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttf, vv

Trong quy tắc css, bạn phải thêm phần mở rộng của tệp. Ví dụ này với sự hỗ trợ sâu sắc nhất có thể:

@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 */
}

BIÊN TẬP:

"Không thể giải mã phông chữ đã tải xuống" có nghĩa là phông chữ bị hỏng hoặc không đầy đủ (thiếu số liệu, bảng cần thiết, hồ sơ đặt tên, một triệu điều có thể).

Đôi khi vấn đề này là do chính phông chữ. Phông chữ của Google cung cấp đúng phông chữ bạn cần nhưng nếu mặt phông chữ là cần thiết, tôi sử dụng Transfonter để tạo tất cả định dạng phông chữ.

Đôi khi, máy khách FTP làm hỏng tệp (không phải trong trường hợp này vì trên máy tính cục bộ). Hãy chắc chắn để chuyển tập tin trong nhị phân và không trong ASCII.

Tôi đã gặp một vấn đề tương tự trong Visual Studio, nguyên nhân là do url()đường dẫn không chính xác đến phông chữ được đề cập.

Tôi đã ngừng nhận lỗi này sau khi thay đổi (ví dụ):

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

đến đây:

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

Thay đổi từ định dạng ('woff') thành định dạng ('font-woff') giúp tôi giải quyết vấn đề này ngay bây giờ.

Chỉ cần thay đổi một chút thay đổi ở đây từ câu trả lời của 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 */
}

Vui lòng kiểm tra xem các nguồn trình duyệt của bạn có thể mở nó không và loại này là gì

Đảm bảo rằng máy chủ của bạn đang gửi các tệp phông chữ với mime / type phù hợp .

Gần đây tôi gặp vấn đề tương tự khi sử dụng nginx vì một số loại mime phông chữ bị thiếu trong /etc/nginx/mime.typestệp vanilla của nó .

Tôi đã khắc phục sự cố thêm các loại mime bị thiếu ở vị trí tôi cần chúng như thế này:

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;}
}

Bạn cũng có thể kiểm tra điều này để mở rộng mime.types trong nginx: mở rộng tệp nginx mime.types mặc định

Tôi đã phải thêm type="text/css"vào thẻ liên kết của tôi. Tôi đã thay đổi nó từ:

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

đến:

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

Sau khi tôi thay đổi, lỗi biến mất.

Tôi chỉ có cùng một vấn đề và giải quyết nó bằng cách thay đổi

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

đến

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

Đối với tôi, lỗi này xảy ra khi tôi tham chiếu phông chữ google bằng https. Khi tôi chuyển sang http, lỗi đã biến mất. (và vâng, tôi đã thử nhiều lần để xác nhận đó là nguyên nhân)

Vì vậy, tôi đã thay đổi:

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

Đến:

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

Đôi khi sự cố này xảy ra khi bạn tải lên / tải xuống các phông chữ bằng phương pháp FTP sai. Phông chữ phải là FTP-ed bằng phương pháp nhị phân, không phải ASCII. (Tùy thuộc vào tâm trạng của bạn, nó có thể cảm thấy phản trực giác, lol). Nếu bạn ftp các tệp phông chữ bằng phương pháp ASCII, bạn có thể nhận được thông báo lỗi này. Nếu bạn ftp các tệp của mình bằng phương thức 'tự động' và bạn nhận được thông báo lỗi này, hãy thử ftp buộc phương thức nhị phân.

Tôi đã gặp vấn đề tương tự với font tuyệt vời v4.4 và tôi đã sửa nó bằng cách xóa định dạng woff2. Tôi chỉ nhận được cảnh báo trong Chrome.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Trong trường hợp của tôi, nó đã được gây ra với một tệp đường dẫn không chính xác, trong .htaccess. Vui lòng kiểm tra tính chính xác của đường dẫn tệp của bạn.

Đối với tôi, lỗi là quên đặt FTP vào chế độ nhị phân trước khi tải lên các tệp phông chữ.

Biên tập

Bạn có thể kiểm tra điều này bằng cách tải lên các loại dữ liệu nhị phân khác như hình ảnh. Nếu họ cũng không hiển thị, thì đây có thể là vấn đề của bạn.

Tôi cũng gặp vấn đề tương tự nhưng tôi đã giải quyết bằng cách thêm 'Loại nội dung': 'application / x-font-ttf' trong tiêu đề phản hồi cho tất cả các tệp .ttf

Trong trường hợp của tôi, điều này xảy ra bằng cách tạo tệp vá SVN bao gồm việc thêm các tệp phông chữ. Thích như vậy:

1. Thêm tệp phông từ hệ thống tệp cục bộ vào thân cây bị lật đổ
2. Thân cây hoạt động như mong đợi
3. Tạo bản vá SVN cho các thay đổi trung kế, để bao gồm thêm các tệp phông chữ
4. Áp dụng bản vá cho một chi nhánh khác
5. Các tệp phông chữ được thêm vào nhánh lật đổ (và có thể được cam kết), nhưng bị lỗi, mang lại lỗi trong OP.

Giải pháp là tải các tệp phông chữ trực tiếp vào chi nhánh từ hệ thống tệp cục bộ của tôi. Tôi cho rằng điều này đã xảy ra vì các tệp vá SVN phải chuyển đổi mọi thứ sang định dạng ASCII và không nhất thiết phải giữ lại nhị phân cho các tệp phông chữ. Nhưng đó chỉ là dự đoán.

Trong trường hợp của tôi - sử dụng React with Gatsby - vấn đề đã được giải quyết bằng cách kiểm tra lại tất cả các đường dẫn của tôi. Tôi đã sử dụng React / Gatsby với Sass và các tệp nguồn Gatsby đang tìm kiếm các phông chữ ở một nơi khác với các tệp được biên dịch. Khi tôi sao chép các tập tin vào từng đường dẫn thì vấn đề này không còn nữa.

Trong trường hợp của tôi khi tải xuống một mẫu, các tệp phông chữ chỉ là các tệp trống. Có lẽ là một vấn đề với việc tải xuống. Chrome đã đưa ra lỗi chung này về nó. Lúc đầu, tôi nghĩ giải pháp thay đổi từ woffđể font-woffgiải quyết nó, nhưng nó chỉ khiến Chrome bỏ qua các phông chữ. Giải pháp của tôi là tìm từng phông chữ một và tải xuống / thay thế chúng.

Nếu bạn đang sử dụng express, bạn cần cho phép phân phát nội dung tĩnh bằng cách thêm một cái gì đó như: var server = express (); server.use (express.static ('./ công khai')); // trong đó công khai là thư mục gốc của ứng dụng, với các phông chữ có trong đó, ở mọi cấp độ, tức là công khai / phông chữ hoặc công khai / dist / phông chữ ... // Nếu bạn đang sử dụng kết nối, google cho một cấu hình tương tự.

Tôi sử dụng .Net Framework 4.5 / IIS 7

Để khắc phục, tôi đặt tệp Web.config vào thư mục có tệp phông chữ.

Nội dung của Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

Đối với tôi đó là một vấn đề với các tệp lfs không được tải xuống

git lfs fetch --all

đã khắc phục sự cố.

xem https://github.com/git-lfs/git-lfs/issues/325

Nếu nó ở trên máy chủ (không phải trong localhost), thì hãy thử tải lên các phông chữ theo cách thủ công, vì đôi khi máy khách FTP (ví dụ: FileZilla) làm hỏng các tệp và nó có thể gây ra sự cố. Đối với tôi, tôi đã tải lên thủ công bằng giao diện Cpanel.

Trường hợp của tôi trông tương tự nhưng phông chữ bị hỏng (và vì vậy không thể giải mã). Nó được gây ra bởi cấu hình trong maven. Thêm nonFilteredFileExtension cho các tiện ích mở rộng phông chữ maven-resources-pluginđã giúp tôi:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>