Tôi đang cố gắng tìm ra một giải pháp phù hợp (đặc biệt là từ phía SEO) để nhúng phông chữ vào các trang web. Cho đến nay tôi đã thấy giải pháp W3C , giải pháp này thậm chí không hoạt động trên Firefox và giải pháp này khá hay . Giải pháp thứ hai chỉ dành cho tiêu đề. Có một giải pháp có sẵn cho toàn văn không? Tôi mệt mỏi với các phông chữ tiêu chuẩn cho các trang web.
Cảm ơn!
Câu trả lời:
Mọi thứ đã thay đổi kể từ khi câu hỏi này ban đầu được hỏi và trả lời. Có một lượng lớn công việc được thực hiện về việc nhúng phông chữ trên nhiều trình duyệt để nội dung văn bản hoạt động bằng cách sử dụng nhúng @ font-face.
Paul Irish đã tập hợp cú pháp Bulletproof @ font-face kết hợp các nỗ lực từ nhiều người khác. Nếu bạn thực sự xem qua toàn bộ bài viết (không chỉ phần trên cùng), nó cho phép một câu lệnh @ font-face duy nhất bao gồm IE, Firefox, Safari, Opera, Chrome và có thể cả những người khác. Về cơ bản, điều này có thể cung cấp OTF, EOT, SVG và WOFF theo những cách không phá vỡ bất cứ điều gì.
Trích từ bài báo của anh ấy:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
Làm việc từ cơ sở đó, Font Squirrel kết hợp nhiều công cụ hữu ích bao gồm @ font-face Generator cho phép bạn tải lên tệp TTF hoặc OTF và nhận các tệp phông chữ được chuyển đổi tự động cho các loại khác, cùng với CSS được tạo sẵn và một trang HTML demo. Font Squirrel cũng có hàng trăm bộ dụng cụ @ font-face .
Soma Design cũng tập hợp FontFriend Bookmarklet , giúp xác định lại phông chữ trên trang một cách nhanh chóng để bạn có thể thử mọi thứ. Nó bao gồm hỗ trợ kéo và thả @ font-face trong FireFox 3.6+.
Gần đây hơn, Google đã bắt đầu cung cấp Phông chữ web của Google , một loại phông chữ có sẵn theo giấy phép Nguồn mở và được cung cấp từ các máy chủ của Google.
Giới hạn Giấy phép
Cuối cùng, WebFonts.info đã tổng hợp một danh sách các Phông chữ đẹp trên wiki'd có sẵn để nhúng @ font-face dựa trên giấy phép. Nó không được coi là một danh sách đầy đủ, nhưng các phông chữ trên đó sẽ có sẵn (có thể kèm theo các điều kiện như ghi nhận tác giả trong tệp CSS) để nhúng / liên kết. Điều quan trọng là phải đọc giấy phép , bởi vì có một số hạn chế không được đẩy lên rõ ràng về tải xuống phông chữ.
Hãy thử Facetype.js , bạn chuyển đổi phông chữ .TTF của mình thành một tệp Javascript. Tương thích hoàn toàn với SEO, hỗ trợ FF, IE6 và Safari và giảm chất lượng trên các trình duyệt khác.
Không, không có giải pháp phù hợp cho loại cơ thể, trừ khi bạn sẵn sàng chỉ phục vụ những người có trình duyệt vượt trội.
Microsoft có WEFT , công nghệ nhúng phông chữ độc quyền của họ, nhưng tôi đã không nghe nó nói về nó trong nhiều năm và tôi không biết ai sử dụng nó.
Tôi nhận được bằng sIFR cho loại hiển thị (tiêu đề, tiêu đề của bài đăng trên blog, v.v.) và sử dụng một trong những phông chữ an toàn trên web ít bị mòn cho loại nội dung (như Trebuchet MS). Nếu bạn cảm thấy nhàm chán với tất cả các phông chữ an toàn cho web, có thể bạn đang định nghĩa thuật ngữ này quá hạn hẹp - hãy nhìn vào ma trận phông chữ cổ phiếu này đi kèm với các hệ điều hành chính và rất có thể bạn sẽ tìm thấy một dòng phông chữ phù hợp thu hút gần như tất cả người dùng web.
Ví dụ: font-family: "Lucida Grande", "Verdana", sans-seriflà một tầng phông chữ chung; OS X đi kèm với Lucida Grande, nhưng những người dùng Windows sẽ nhận được Verdana, một phông chữ an toàn trên web với các chữ cái có kích thước và hình dạng tương tự như Lucida Grande. Người dùng Linux cũng sẽ nhận được Verdana nếu họ đã cài đặt gói phông chữ an toàn cho web tồn tại trong hầu hết các trình quản lý gói của bản phân phối, nếu không họ sẽ trở lại sans-serif bình thường.
Và nó cũng không chắc - EOT là một định dạng khá hạn chế chỉ được hỗ trợ bởi IE. Cả Safari 3.1 và Firefox 3.1 (cũng là alpha hiện tại) và có thể cả Opera 9.6 đều hỗ trợ nhúng phông chữ true type (ttf) và ít nhất Safari hỗ trợ phông chữ SVG thông qua cùng một cơ chế. Một danh sách khác đã có một cuộc thảo luận tốt về điều này một thời gian trở lại .
Kiểm tra Typekit , một tùy chọn thương mại (họ cũng có gói miễn phí).
Nó sử dụng các kỹ thuật khác nhau tùy thuộc vào trình duyệt đang được sử dụng ( @font-faceso với EOTđịnh dạng) và họ cũng xử lý tất cả các vấn đề cấp phép phông chữ cho bạn. Nó hỗ trợ mọi thứ cho đến IE6.
Dưới đây là một số thông tin thêm về cách Typekit hoạt động:
Tôi đã hỏi điều này một thời gian trở lại . Câu trả lời về cơ bản là nó không hoạt động. :(