Không thể giải mã phông chữ đã tải xuống, lỗi phân tích OTS: thẻ phiên bản không hợp lệ + rails 4

Tôi đang thực hiện biên dịch trước tài sản và chạy ứng dụng ở chế độ sản xuất. Sau khi biên dịch khi tôi tải trang chỉ mục của mình, tôi đã nhận được các cảnh báo sau trong bảng điều khiển chrome:

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

Vấn đề là nó không tải biểu tượng thay vì nó hiển thị hình vuông .

chúng tôi đã sử dụng các phông chữ tùy chỉnh và mã là:

@font-face {
  font-family: 'icomoon';
  src: font-url('icomoon.eot');
  src: font-url('icomoon.eot?#iefix') format('embedded-opentype'),
       font-url('icomoon.ttf') format('truetype'),
       font-url('icomoon.woff') format('woff'),
       font-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

Tôi không biết những gì còn thiếu từ cuối của tôi. Tôi đã tìm kiếm rất nhiều và cũng đã thử giải pháp nhưng không có kết quả. Trong chế độ phát triển, nó hoạt động tốt nhưng không biết tại sao nó lại hiển thị hình vuông trong chế độ sản xuất.

Tôi đã nhận được cùng một lỗi chính xác, và trong trường hợp của tôi, hóa ra là do một đường dẫn sai cho @font-facekhai báo. Trình kiểm tra web không bao giờ phàn nàn với 404 vì máy chủ dev chúng tôi đang sử dụng (máy chủ trực tiếp) được định cấu hình để phục vụ chỉ mục mặc định.html trên mọi 404: s. Không biết bất kỳ chi tiết nào về thiết lập của bạn, đây có thể là thủ phạm có khả năng.

Nếu chạy trên IIS với tư cách là máy chủ và .net 4 / 4.5 thì có thể thiếu các định nghĩa mở rộng mime / tệp trong Web.config - như thế này:

<system.webServer>
	<staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Tôi có những vấn đề giống nhau., OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

Nếu bạn nhận được thông báo lỗi này trong khi cố gắng cam kết phông chữ của mình thì đó là một vấn đề với .gitattribut " warning: CRLF will be replaced by LF"

Giải pháp cho việc này là thêm bất kỳ phông chữ nào bạn gặp phải vấn đề với .gitattribut

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

Sau đó, tôi đã xóa các tệp phông bị hỏng và áp dụng lại các tệp phông mới và đang hoạt động rất tốt.

thử

@font-face {
  font-family: 'icomoon';
  src: asset-url('icomoon.eot');
  src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
       asset-url('icomoon.ttf') format('truetype'),
       asset-url('icomoon.woff') format('woff'),
       asset-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

và đổi tên tập tin của bạn thành application.css.scss

Tôi đã có một phông chữ bị hỏng, mặc dù nó dường như đang tải mà không có vấn đề gì và trong phần Nguồn trong Chrome devtools xuất hiện để hiển thị, số byte không chính xác, vì vậy tôi đã tải xuống lại và nó đã giải quyết nó.

Chỉ cần định dạng trạng thái tại @ font-face như sau:

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

Tôi đã có cùng một vấn đề và đó là do git coi các tệp này là văn bản. Vì vậy, trong khi kiểm tra các tệp trong các tác nhân xây dựng, nhị phân không được duy trì.

Thêm phần này vào .gitattributestập tin của bạn và thử.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

Khi sử dụng angular-cli, đây là những gì làm việc cho tôi:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".eot" />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <remove fileExtension=".ttf" />
            <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
            <remove fileExtension=".svg" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Tôi đã nhận được các lỗi sau:

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

đã được sửa sau khi tải xuống tệp thô trực tiếp từ:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-THER.woff2

Vấn đề là đã có lỗi proxy khi tải xuống tệp (nó chứa thông báo lỗi HTML).

Truy cập địa chỉ bên dưới trên GitHub và tải xuống từng tệp FontAwgie.

https://github.com/FortAwgie/font-awgie-sass/tree/master/assets/fonts/font-awgie

... nhưng thay vì nhấp chuột phải và lưu liên kết dưới dạng, hãy nhấp vào từng tệp và sử dụng nút 'Tải xuống' để lưu chúng.

Tôi thấy rằng việc lưu liên kết khi tải xuống một trang HTML chứ không phải chính tệp nhị phân của tệp FontAwgie.

Khi tôi đã có tất cả các nhị phân, nó làm việc cho tôi.

Vấn đề của tôi là tôi đã khai báo hai phông chữ và scss dường như mong đợi rằng bạn khai báo tên của phông chữ.

phía sau của cậu @font-face{} bạn phải khai báo $my-font: "OpenSans3.0 or whatever";

và cái này cho mỗi khuôn mặt phông chữ.

:-)

Đối với người dùng angular-cli và webpack tôi nghi ngờ rằng có một số vấn đề trong khi nhập phông chữ trong tệp css, vì vậy vui lòng cung cấp vị trí url được mã hóa với các dấu ngoặc đơn như sau -

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
     url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Bài đăng này có thể cũ, nhưng đây là giải pháp hiệu quả với tôi.

Tôi đã có cùng một vấn đề.

Thêm phiên bản phông chữ (ví dụ ?v=1.101) vào URL phông chữ sẽ thực hiện thủ thuật;)

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Nhấp (nhấp chuột phải) vào phiên bản TTF của phông chữ và chọn "Nhận thông tin" (Mac OSX) "Thuộc tính" (Windows) trong menu ngữ cảnh là đủ để truy cập phiên bản phông chữ.

Nếu bạn đang sử dụng Chrome, hãy thử thêm phiên bản opentype (OTF) của phông chữ của bạn như được hiển thị bên dưới:

    ...
     url('icomoon.otf') format('opentype'),
    ...

Chúc mừng!

Nếu bạn sử dụng bootstrap thì Cập nhật bootstrap.min.csstệp bootstrap css ( ) và các tệp phông chữ. Tôi đã khắc phục vấn đề của tôi với giải pháp này.

Tôi đang sử dụng ASP.NET với IIS và hóa ra tôi chỉ cần thêm loại MIME vào IIS: '.woff2' / 'application / font-woff'

Sau khi thử nhiều cách tiếp cận khác, cũng như cài đặt lại và kiểm tra, tôi đã khắc phục vấn đề bằng cách xóa dữ liệu duyệt web khỏi Chrome (hình ảnh và tệp được lưu trong bộ nhớ cache) và sau đó làm mới trang.

Tôi đã có vấn đề tương tự khi tôi mở và lưu .woffvà. woff2tập tin thông qua văn bản tuyệt vời với EditorConfigtùy chọn end_of_line = lf. Tôi chỉ sao chép các tập tin vào thư mục phông chữ mà không mở chúng vào Sublime và vấn đề đã được giải quyết.

Nếu câu trả lời khác không hoạt động, hãy thử:

1. kiểm tra tập tin .htaccess

   # Fonts
# Add correct content-type for fonts
   

   AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
   

2. xóa bộ nhớ cache của máy chủ

3. xóa bộ nhớ cache của trình duyệt và tải lại

Kiểm tra tập tin css phông chữ của bạn . (fontawgie.css / fontawclaw.min.css) , bạn sẽ thấy như thế này:

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

bạn sẽ thấy thẻ phiên bản sau tên phần mở rộng tệp của phông chữ của bạn . Giống:

-v = 4.6.3

Bạn chỉ cần xóa thẻ này khỏi tệp css của bạn. Sau khi xóa cái này, bạn cần vào thư mục phông chữ của mình, và bạn sẽ thấy:

Và, Tạo các tệp của phông chữ này, bạn chỉ cần xóa thẻ phiên bản -v = 4.6.3 khỏi tên tệp.

Sau đó, vấn đề sẽ được giải quyết.

chỉ trong trường hợp này có liên quan đến một ai đó. Tôi đã nhận được cùng một lỗi chính xác khi sử dụng ASP.NET và C # trong Visual studio. Khi tôi khởi động ứng dụng từ trong studio hình ảnh, nó đã hoạt động, nhưng tôi gặp vấn đề này. Trong khi đó, hóa ra, đường dẫn đến dự án của tôi chứa ký tự "#" (c: \ C # \ testapplication). Điều này dường như gây nhầm lẫn IIS Express (có thể cả IIS) và gây ra vấn đề này. Tôi đoán "#" là một ký tự dành riêng ở đâu đó trong ASP.NET hoặc bên dưới. Thay đổi đường dẫn đã giúp và bây giờ nó hoạt động như mong đợi.

Trân trọng

Điều giúp tôi là tôi đã thay đổi thứ tự. .Eot được tải trước, nhưng lỗi của tôi là khi tải .eot. Vì vậy, tôi đã bỏ .eot làm src đầu tiên cho woff2 và lỗi đã biến mất.

Vì vậy, mã bây giờ là:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Và là:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

Tôi đã có cùng một vấn đề, điều này làm việc cho tôi https://github.com/webpack/webpack/issues/1468