Không thể hiểu quy tắc CSS phông chữ @ chống đạn

Question

Trước khi đánh dấu trang này là trùng lặp, vui lòng đọc kỹ các nghi ngờ của tôi. Tôi đã tìm kiếm kỹ lưỡng trên web (đặc biệt là stackoverflow) & không thể nhận được những nghi ngờ bị xóa. Câu hỏi này có vẻ hơi dài nhưng chỉ chứa đựng những vấn đề quan trọng mà những người khác cũng muốn biết.

Tôi đang cố gắng đạt được kiến ​​thức sâu một chút trong quy tắc chống đạn @font-face và những người ngoài kia đang gây nhầm lẫn cho tôi. Hãy đề nghị tôi về những người này. Vì vậy, đây là mã mới nhất chống đạn theo đề nghị của Font-Xuân (http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/) cùng với các vấn đề chế độ tương thích IE9 giải quyết:

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

Người mà không IE9 chế độ tương thích Fix, cũng bởi Font -Spring (http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/), trông như thế này:

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
} 

Hiện nay, tôi đang đọc một cuốn sách "The Book Of CSS3" Peter Gasston. Nó tuân theo quy tắc chống đạn với Chế độ tương thích IE9 khắc phục như được trình bày bởi Font-Spring. Ông nói rằng quy tắc với chuỗi truy vấn ? trong thuộc tính thứ hai src chịu trách nhiệm về IE9 Compat. Chế độ sửa chữa. Tuy nhiên, font-spring giữ thuộc tính src đầu tiên chịu trách nhiệm về IE9 Compat. Chế độ sửa chữa. Tôi không thể học cú pháp này mà không hiểu nó hoàn toàn.

Vấn đề nghiêm trọng của tôi khá nhỏ. Trước hết, tôi muốn biết nếu chỉ ?#iefix có thể ngăn chặn lỗi phân tích cú pháp hoặc có thể là lỗi giống như ?iefix (không có #) hoặc có thể là ?xyz hoặc ?#abc. Có cần viết chính xác ?#iefix không?

Thứ hai,

• tôi không thể cảm thấy như thế nào cai trị @font-face này được phân tích cú pháp, làm thế nào IE8 quyết định đó của src thuộc tính được sử dụng cho eot phông chữ. Và nếu IE9 không có vấn đề với phân tích cú pháp ngay cả trong chế độ tương thích , nó sẽ quyết định định dạng phông chữ nào sẽ sử dụng? Sẽ IE9 trong chế độ tương thích ngắt trên url chuỗi truy vấn url & nếu không thì tại sao lại không?
• Ai đó có thể cho tôi biết nếu tôi xem toàn bộ quy tắc chống đạn được nêu là ở trên, IE8, IE9 ở chế độ tương thích như thế nào, IE9 ở chế độ bình thường & khác trình duyệt sẽ phân tích cú pháp? Làm thế nào một trình duyệt sẽ quyết định từ một số phông chữ mà một trong những sử dụng nếu nó hỗ trợ phần lớn trong số họ. Thứ tự trình duyệt trông như thế nào với giá trị url và src thuộc tính?
• Có như vậy một src sở hữu một mình mà không cần bất kỳ local() và format() giá trị và với một định dạng đúng eot sẽ được chấp nhận bởi IE8 và nó sẽ không đi xa hơn đến src tài sản mà các định dạng khác được định nghĩa tiếp theo? Hoặc nó vẫn sẽ chuyển đến phần tiếp theo src & tải xuống phông chữ từ đó?
• Nếu có chuỗi truy vấn (?) trong thuộc tính src tiếp theo, thì IE8 (IE9 ở chế độ tương thích cũng được xem xét) tải xuống phông chữ eot hai lần? Và nếu không có chuỗi truy vấn , thì nó sẽ chấp nhận phông chữ eot từ thuộc tính đầu tiên và sẽ không bị vỡ hoặc nó sẽ vi phạm & không áp dụng bất kỳ phông chữ nào được xác định tùy chỉnh ngay cả từ thuộc tính src đầu tiên?

Ngoài ra, IE9 ở chế độ bình thường có hỗ trợ định dạng eot không? Sẽ không cú pháp chống đạn vẫn làm việc nếu tôi chỉ loại bỏ các tuyên bố chuỗi truy vấn toàn bộ như:

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE6-IE8 as well as IE9 Compat. Mode */ 
src: url('webfont.woff') format('woff'), /* Modern Browsers */ 
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

Sẽ không có người ở trên vẫn làm việc trong tất cả các trường hợp có thể? IE6-8 sẽ có src đầu tiên cùng với IE9 trong chế độ tương thích và tất cả các trình duyệt khác sẽ tuân theo các quy tắc còn lại.

các quy tắc trên được đề xuất bởi tôi sẽ làm việc cùng với các giá trị local() như sau:

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE6-IE8 & IE9 Compat. Mode */ 
src: local('MyWebFont'), /* To fix IE6-IE8 and IE9 Compat. Mode */ 
    url('webfont.woff') format('woff'), /* Modern Browsers */ 
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

Cho dù trong IE8 hoặc trong chế độ tương thích IE9, local() giá trị sẽ làm cho họ đi xa .. Sẽ IE9 trong chế độ bình thường sử dụng eot hoặc woff từ quy tắc trên ?? Nếu nó không sử dụng eot, chúng ta có thể thực hiện một thay đổi nhỏ để sở hữu src đầu tiên như thế này:

src: url('webfont.eot?#iefix') format('eot'); 

IE9 sẽ bỏ qua khách sạn này vì nó có chứa eot và di chuyển về tiếp tục sử dụng woff, tôi phải không? Ngoài ra, nếu tôi một lần nữa thực hiện thay đổi đối với quy tắc này chính nó như thế này:

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

Sẽ IE9 hiện nay sử dụng định dạng eot hay vẫn tiếp tục với woff?

Đây là tất cả những gì tôi muốn biết và có Tôi nghĩ rằng những câu hỏi này chắc chắn cần câu trả lời.

Answer 1

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

này chỉ đơn giản là một thủ thuật để workaround IE khác nhau * mâu thuẫn, với src đầu tiên bạn đáp ứng IE9, vì vậy nếu người xem có trình duyệt này anh nhận được font chữ này, src thứ hai không ghi đè lên một trong những đầu tiên vì IE9 không thể phân tích cú pháp chuỗi 'webfont.eot?#iefix'

Giới thiệu về src thứ hai của quy tắc: đó là cú pháp chống đạn "cũ" và bạn đã quen thuộc với nó. Xin lưu ý rằng, như đã nói trong bài đăng trên blog về Fontspring về nguyên tắc cứng, Microsoft đã sửa lỗi trong IE9 khi sử dụng chế độ render IE7 và IE8 nhưng chúng không thực sự cố định IE7 và IE8 vì vậy bạn vẫn cần mẹo này cho các trình duyệt này.

Làm rõ về local(): điều này yêu cầu trình duyệt sử dụng một số địa phương (tức là trên máy của người xem trang) phông chữ sẵn có, nếu trình xem của bạn không có cài đặt thì anh ấy sẽ không thể để xem đúng phông chữ, để biết thêm thông tin về điều này, bạn có thể kiểm tra điều này: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley