Sử dụng CSS @ font-face với iPad/iPhone

Question

Tôi đang cố gắng sử dụng thuộc tính font-face của CSS với một phông chữ tùy chỉnh:

@font-face { 
    font-family: "Handvetica"; 
    src: url("Handvetica.eot"); 
    src: url("Handvetica.ttf") format("truetype"), 
    url("Handvetica.otf") format("opentype"), 
    url("Handvetica.woff") format("woff"), 
    url("Handvetica.svg#Handvetica") format("svg"); 
} 

nó hoạt động trên FF, Safari & chrome đúng cách.

nhiều trang web trên trạng thái web sử dụng phông chữ trên thiết bị iOs (iPod/iPhone/iPad) cần có phông chữ svg. các phông chữ đã được chuyển đổi bằng cách sử dụng https://onlinefontconverter.com và tôi có tất cả các định dạng.

phông chữ svg không hiển thị trên iO. Có ai biết cách làm cho nó hoạt động không? Ngoài ra, cú pháp đúng cho số # trong khai báo url svg là gì? nó đứng để làm gì?

Cảm ơn.

Answer 1

nó có thể là công cụ chuyển đổi mà bạn sử dụng - hoặc có thể là bộ đệm ẩn iPad. trang web phông chữ tốt nhất trên thế giới:

http://www.fontsquirrel.com/

tạo ra bộ font face đúng, mang đến cho bạn một bộ phông chữ - bạn có thể gửi nó phông chữ của riêng bạn (giấy phép cho phép) và nó sẽ xây dựng một mặt chữ kit cho bạn. Điều này bao gồm TTF, Woof, SVG, OTF.

Kéo toàn bộ nội dung, CSS, phông chữ, ví dụ và bạn tải xuống.

Luôn làm việc cho tôi.

Answer 2

Có thể là máy chủ. Đối với SVG để làm việc đôi khi bạn cần loại mime SVG thiết lập:

image/svg+xml 

Answer 3

Đây là một câu hỏi cũ, nhưng tôi tìm không ai trả lời nó được nêu ra và tôi đã gặp vấn đề tương tự trước đó.

Số # sau url SVG biểu thị ID phông chữ SVG và nó sẽ không hoạt động nếu chuỗi sau # không khớp với ID của phông chữ SVG. Nếu bạn mở tập tin SVG, bạn sẽ thấy một thẻ như thế này:

<font id="webfontSRj8j0PE" horiz-adv-x="1058" > 

này là dành cho font BEBAS, nhưng nếu nó là dành cho phông chữ Handvetica của bạn ví dụ, bạn sẽ phải gõ vào url("Handvetica.svg#webfontSRj8j0P") format("svg")

Answer 4

Ngoài ra, cú pháp đúng cho # trong khai báo url svg là gì? có nghĩa là gì?

Đó là tham chiếu đến phần tử <font> hoặc <font-face> cụ thể trong tệp đã cho. Bạn có thể có bất kỳ số lượng phông chữ/phông chữ svg nào bên trong cùng một tệp svg, mặc dù nó phổ biến nhất để chỉ có một.

Answer 5

Tôi đã sử dụng FontAwesome và tôi gặp phải sự cố tương tự. Vấn đề là định danh .svg # không khớp với những gì thực sự có trong tệp .svg.

Trong tập tin bạn sẽ thấy: <font id="FontAwesomeRegular" horiz-adv-x="1843" >

Để có được các biểu tượng của bạn để không xuất hiện như hình vuông thay đổi dòng này trong font-tuyệt vời.css tập tin

Thay đổi dòng này:

@font-face { 
    font-family: "FontAwesome"; 
    src: url('../font/fontawesome-webfont.eot'); 
    src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), 
    url('../font/fontawesome-webfont.woff') format('woff'), 
    url('../font/fontawesome-webfont.ttf') format('truetype'), 
    url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

đến dòng này

@font-face { 
    font-family: "FontAwesome"; 
    src: url('../font/fontawesome-webfont.eot'); 
    src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), 
    url('../font/fontawesome-webfont.woff') format('woff'), 
    url('../font/fontawesome-webfont.ttf') format('truetype'), 
    url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 6

TransType, một công cụ chuyên dùng để chuyển đổi định dạng font chữ, cũng có thể tạo ra các file web-font @font với một cú nhấp chuột. Không giống như fontsquirrel, nó hoạt động cho cả các phông chữ Latin và không phải Latin, chẳng hạn như tiếng Ả Rập. http://www.fontlab.com/font-converter/transtype/ Tuy nhiên, các trang sử dụng các @font này dường như hoạt động trên các trình duyệt trên máy tính để bàn và ios8 ipad, nhưng không phải trên ioS8