Làm cách nào để tải phông chữ bên ngoài vào tài liệu HTML?

Question

Làm cách nào để tải các tệp phông chữ bên ngoài vào tài liệu HTML.

Ví dụ: Làm cho văn bản "blah blah blah blah blah blah blah" một phông chữ tùy chỉnh từ một file TTF trong cùng thư mục sử dụng HTML CSS và/hoặc JAVASCRIPT

Answer 1

Hãy xem điều này A List Apart article. CSS thích hợp là:

@font-face { 
    font-family: "Kimberley"; 
    src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype"); 
} 
h1 { font-family: "Kimberley", sans-serif } 

Ở trên sẽ hoạt động trong Chrome/Safari/FireFox. Như Paul D. Waite đã chỉ ra trong các ý kiến ​​bạn có thể làm cho nó hoạt động với IE nếu bạn chuyển đổi phông chữ thành EOT format.

Tin tốt là điều này dường như làm suy giảm một cách duyên dáng trong các trình duyệt cũ hơn, miễn là bạn biết và thoải mái với thực tế là không phải tất cả người dùng sẽ thấy cùng một phông chữ, nó an toàn để sử dụng.

Answer 2

CSS3 cung cấp một cách để làm điều đó với @ quy tắc phông chữ.

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

Here là một số cách khác nhau mà sẽ làm việc trong các trình duyệt không hỗ trợ @ font-face quy tắc.

Answer 3

Về Jay Stevens trả lời: "Các phông chữ có sẵn để sử dụng trong tệp HTML phải có trên máy của người dùng và có thể truy cập từ trình duyệt web, vì vậy trừ khi bạn muốn phân phối phông chữ tới máy của người dùng quá trình, nó không thể được thực hiện. " Đung.

Nhưng có một cách khác bằng cách sử dụng javascript/canvas/flash - giải pháp rất tốt cho cufon: http://cufon.shoqolate.com/generate/ thư viện tạo ra rất dễ sử dụng các phương pháp phông chữ bên ngoài.

Answer 4

Nếu bạn muốn hỗ trợ các trình duyệt khác hơn so với tưởng tượng CSS3, bạn có thể nhìn vào các thư viện mã nguồn mở cufon javascript library

Và đây là the API, nếu bạn muốn làm công cụ sôi nổi hơn.

Chuyên nghiệp chính: Cho phép bạn làm những gì bạn muốn/cần.

Major Côn: Không cho phép lựa chọn văn bản trong một số trình duyệt, vì vậy sử dụng là thích hợp trên các văn bản tiêu đề (nhưng bạn có thể sử dụng nó trong tất cả các trang web của bạn nếu bạn muốn)

Answer 5

Microsoft có một phương pháp CSS độc quyền của bao gồm phông chữ nhúng (http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx), nhưng điều này có lẽ không nên được khuyến khích.

Trước đây tôi đã sử dụng sIFR trước khi công cụ này hoạt động tuyệt vời Điều này không ảnh hưởng đến việc đánh dấu xung quanh văn bản (nó hoạt động bằng cách sử dụng lớp CSS), bạn vẫn có thể chọn văn bản và nếu người dùng không có Flash hoặc bị vô hiệu hóa, nó sẽ làm suy giảm một cách duyên dáng đối với văn bản trong bất kỳ phông chữ nào bạn chỉ định trong CSS (ví dụ: Arial).

Answer 6

Paul Irish có cách để thực hiện việc này bao gồm hầu hết các sự cố thường gặp.Xem mình bullet-proof @font-face article:

Các biến thể cuối cùng, mà dừng lại dữ liệu không cần thiết khỏi quá trình download của IE, và các công trình trong IE8, Firefox, Opera, Safari, và Chrome trông như thế nà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"); 
} 

Ông cũng liên kết tới a generator sẽ dịch các phông chữ thành tất cả các định dạng bạn cần.

Khi những người khác đã chỉ định, điều này sẽ chỉ hoạt động trong thế hệ trình duyệt mới nhất. Đặt cược tốt nhất của bạn là sử dụng điều này cùng với một cái gì đó như Cufon, và chỉ tải Cufon nếu trình duyệt không hỗ trợ @font-face.

Answer 7

Hãy thử điều này

<style> 
@font-face { 
     font-family: Roboto Bold Condensed; 
     src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf); 
} 
@font-face { 
     font-family:Roboto Condensed; 
     src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff); 
} 

div1{ 
    font-family:Roboto Bold Condensed; 
} 
div2{ 
    font-family:Roboto Condensed; 
} 
</style> 
<div id='div1' >This is Sample text</div> 
<div id='div2' >This is Sample text</div> 

Answer 8

Tôi không thấy bất kỳ tài liệu tham khảo để Raphaël.js. Vì vậy, tôi nghĩ tôi sẽ đưa nó vào đây. Raphael.js tương thích ngược với IE5 và Firefox rất sớm cũng như tất cả các trình duyệt còn lại. Nó sử dụng SVG khi nó có thể và VML khi nó có thể không. Những gì bạn làm với nó là vẽ lên canvas. Một số trình duyệt thậm chí sẽ cho phép bạn chọn văn bản được tạo. Raphaël.js có thể được tìm thấy ở đây:

http://raphaeljs.com/

Nó có thể đơn giản như việc tạo ra khu vực vẽ giấy của bạn, xác định font chữ, font-weight, kích thước, vv ... và sau đó nói với nó để đưa bạn chuỗi văn bản trên giấy. Tôi không chắc chắn nếu nó được xung quanh các vấn đề cấp giấy phép hay không nhưng nó được vẽ văn bản vì vậy tôi khá chắc chắn nó không phá vỡ các vấn đề cấp phép. Nhưng hãy kiểm tra với luật sư của bạn để chắc chắn. :-)