Câu hỏi Làm thế nào để nhúng phông chữ trong HTML?


Tôi đang cố gắng tìm ra một giải pháp phong nha (đặ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, thậm chí không hoạt động trên Firefox và giải pháp khá thú vị này. Giải pháp thứ hai chỉ dành cho chức danh. Có 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ữ chuẩn cho các trang web.

Cảm ơn!


76
2017-10-20 22:57


gốc


X-Ref Làm cách nào để thêm một số phông chữ không chuẩn vào một trang web? - hakre
có thể trùng lặp Phông chữ trên Web - user2284570
@ user2284570 Câu hỏi này có câu trả lời tốt hơn. Tôi đã đóng một cái khác như là một bản sao của điều này. - Madara Uchiha♦


Các câu trả lời:


Mọi thứ đã thay đổi vì 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 khi nhúng phông chữ trình duyệt chéo cho văn bản nội dung để hoạt động bằng cách nhúng @ phông mặt.

Paul Irish đặt lại với nhau Cú pháp-phông chữ chống đạn @ kết hợp các nỗ lực từ nhiều người khác. Nếu bạn thực sự đi qua toàn bộ bài viết (không chỉ ở 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à 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ì.

Được trích từ bài viết 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ăn cứ đó, Font Squirrel tập hợp nhiều công cụ hữu ích khác nhau bao gồm Trình tạo phông chữ @ cho phép bạn tải lên tệp TTF hoặc OTF và nhận 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 trước và trang HTML demo. Font Squirrel cũng có Hàng trăm bộ dụng cụ @ phông chữ.

Soma Design cũng kết hợp FontFriend Bookmarklet, để xác định lại phông chữ trên trang khi đang di chuyển để bạn có thể thử mọi thứ. Nó bao gồm kéo và thả @ hỗ trợ font-face trong FireFox 3.6+.

Gần đây, 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 phân phát từ 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 wiki Phông chữ có sẵn để nhúng @ phông chữ dựa trên giấy phép. Nó không yêu cầu phải là một danh sách đầy đủ, nhưng phông chữ trên nó sẽ có sẵn (có thể với các điều kiện như một ghi công 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 về phía trước rõ ràng trên các tải xuống phông chữ.


127
2017-12-27 22:27



Tôi nghĩ rằng nó là xứng đáng để nhấn mạnh rằng bạn không tự động được phép để có một phông chữ và @ font-face-ize nó ngay cả khi bạn đã mua một giấy phép của font chữ hợp pháp và cho rất nhiều tiền. Bạn cần kiểm tra giấy phép của phông chữ cho dù loại phân phối lại điện tử đó có được phép hay không. Vi phạm là dễ dàng như vậy để phát hiện và trawl cho rằng có thể dễ dàng có rắc rối khác, đặc biệt là nếu bạn là một công ty nằm trong quyền tài phán. - Pekka 웃
FontSquirrel làm cho một điểm rõ ràng của điều này cả trên bộ dụng cụ phông chữ được xây dựng sẵn của nó và trong máy phát điện của nó (mà đòi hỏi bạn phải xác minh rằng các phông chữ thực sự được cấp phép cho việc sử dụng như vậy). Có những công cụ chuyển đổi khác ngoài kia, nhưng tôi không biết những công cụ nào tạo nên một điểm thảo luận về cấp phép. - fencepost
Tôi sửa đổi để làm cho điều này rõ ràng hơn trong phản ứng của tôi. - fencepost
Nội dung hấp dẫn. Ngoài sự tò mò, bạn đã làm cách nào để đăng bài này? Có nhiều câu trả lời trong cùng một ngày và một số nhận xét về câu trả lời của bạn. +1 ... - Dan Rosenstark
Tôi không nhớ làm thế nào tôi đã kết thúc trên nó - tìm kiếm font HTML có lẽ, nhưng tôi trả lời bởi vì tôi đã làm việc trên chỉ này cho một khách hàng ngay trước Giáng sinh để thông tin được tươi. Tôi cho rằng Pekka coi đó là hoạt động mới trên một bài đăng cũ; Tôi không biết nếu hệ thống cờ cố gắng để đăng nhiều liên kết (tôi biết nó bị chặn ban đầu) nhưng tôi figured nó có thể là một trường hợp "kiểm tra này để chắc chắn nó không phải ai đó gửi thư rác". - fencepost


Thử Facetype.js, bạn chuyển phông chữ .TTF thành tệp Javascript. Tương thích hoàn toàn với SEO, hỗ trợ FF, IE6 và Safari và giảm xuống một cách duyên dáng trên các trình duyệt khác.


9
2018-02-15 11:22



Rất rất tuyệt. Tôi sẽ kiểm tra điều này. - Dan Rosenstark
Đối với những người tự hỏi nó hoạt động như thế nào, nó sử dụng thẻ canvas (html 5) hoặc VML. - Chris S
Tôi sẽ phải đồng ý với giải pháp này, nó trông cực kỳ đơn giản và dường như đang làm việc trên mọi trình duyệt tôi ném vào nó. - askon
Liên kết này đã chết. - aleclarson


Không, không có giải pháp tốt cho loại hình cơ thể, trừ khi bạn sẵn sàng chỉ phục vụ cho những người có trình duyệt xuất huyết.

Microsoft có WEFT, công nghệ nhúng phông chữ độc quyền của riêng họ, nhưng tôi chưa nghe 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 các phông chữ an toàn trên web ít bị mòn hơn đối với loại nội dung (như Trebuchet MS). Nếu bạn chán với tất cả các phông chữ an toàn trên web, có thể bạn đang xác định cụm từ quá hẹp - hãy xem ma trận cổ phiếu này tàu đó với các hệ điều hành lớn và cơ hội là bạn sẽ có thể tìm thấy một chuỗi thác mà sẽ bắt gần như tất cả người dùng web.

Ví dụ: font-family: "Lucida Grande", "Verdana", sans-serif là một phông chữ phổ biến; OS X đi kèm với Lucida Grande, nhưng những người có Windows sẽ nhận được Verdana, một phông chữ web an toàn 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ữ web an toàn tồn tại trong hầu hết các trình quản lý gói của distro, nếu không họ sẽ quay trở lại sans-serif bình thường.


6
2017-10-20 23:17



Hãy để tôi cũng đứng trên hộp xà phòng trong một phút: mặc dù tôi muốn Windows có nhiều phông chữ "tốt" hơn (OS X có số truy cập nhiều nhất về lịch sử kiểu chữ: Futura, Helvetica, Gill Sans, vv), đó là một điều tốt mà chúng tôi có để kiềm chế bản thân khi chọn phông chữ. Tự do cũng có thể được sử dụng cho cái ác. - savetheclocktower
Không có bình luận về bình luận của bạn, nhưng cảm ơn cho câu trả lời. Thật tuyệt. Có một danh sách các thác ở đâu đó không? Cảm ơn một lần nữa. - Dan Rosenstark
Dưới đây là một danh sách: (ampsoft.net/webdesign-l/WindowsMacFonts.html). Đó là bảo thủ, chỉ liệt kê các phông chữ giống hệt nhau (hoặc gần như vậy) trên các nền tảng. Bạn có thể phải so sánh để xem phông chữ "an toàn" nào giống như phông chữ "nguy hiểm nhất" của bạn. - savetheclocktower
(Oh, cũng: luôn luôn chỉ định một dự phòng chung - sans-serif, serif, hoặc monospace. Bằng cách đó, nó sẽ ít nhất là trong ballpark, nên người dùng có không ai các phông chữ bạn yêu cầu.) - savetheclocktower
Hầu hết người dùng đến các trang web tôi làm việc trên vẫn còn sử dụng IE6 (những kẻ khốn khổ) Vì vậy, từ quan điểm đó tôi xem xét các phiên bản chính mới nhất để được chảy máu cạnh. - Gene


Và nó cũng không thể - 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ể Opera 9.6 hỗ trợ nhúng phông chữ đúng kiểu (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 nhau đã có một cuộc thảo luận tốt về điều này một thời gian trở lại.


4
2017-10-20 23:06



Này, tôi sắp đăng liên kết đó, upvote. - Kris


Kiểm tra Typekit, một lựa chọn thương mại (họ có một gói miễn phí có sẵn quá).

Nó sử dụng các kỹ thuật khác nhau tùy thuộc vào trình duyệt nào đang được sử dụng (@font-face so với EOT định dạng) và họ cũng quan tâm đến tất cả các vấn đề cấp phép phông chữ cho bạn. Nó hỗ trợ mọi thứ xuống IE6.

Dưới đây là một số thông tin thêm về cách thức hoạt động của Typekit:


3
2017-12-27 22:29





Tôi hỏi cái này một lúc trở lại. Câu trả lời về cơ bản là nó không hoạt động. :(


2
2017-10-20 23:17



đúng, cảm ơn bạn đã tham khảo! - Dan Rosenstark