Làm thế nào để thêm một số phông chữ không chuẩn vào một trang web?

518

Có cách nào để thêm một số phông chữ tùy chỉnh trên một trang web mà không cần sử dụng hình ảnh, Flash hoặc một số đồ họa khác không?

Ví dụ, tôi đang làm việc trên một trang web đám cưới và tôi đã tìm thấy rất nhiều phông chữ đẹp cho chủ đề đó. Nhưng tôi không thể tìm đúng cách để thêm phông chữ đó trên máy chủ. Và làm cách nào để đưa phông chữ đó với CSS vào HTML? Điều này có thể làm mà không có đồ họa?

html  css  fonts  font-face 
— vaske
nguồn
18
Vì câu hỏi này đã được hỏi, @font-faceđã trở nên được hỗ trợ rộng rãi hơn nhiều và được khuyến khích sử dụng chung. Bạn chỉ cần lưu ý rằng IE yêu cầu phông chữ ở định dạng khác với các trình duyệt khác. Xem stackoverflow.com/questions/2219916/is-font-face-Us-now
— David Johnstone
10
Hãy chắc chắn rằng bạn có quyền phân phối phông chữ!
— Việt
2
Truy cập typekit.com hoặc để biết các phông chữ
— bjudson
1
— Adrien Be
3
www.fontsquirrel.com có ​​vẻ tuyệt vời để tạo các tệp phông chữ cần thiết và tạo một cú pháp @fontface chống đạn tốt (giống như các phông chữ được đề xuất.com / blog / tiền tố -ie9-font-face-probols )
— Adrien Be

Câu trả lời:

500

Điều này có thể được thực hiện thông qua CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Nó được hỗ trợ cho tất cả các trình duyệt thông thường nếu bạn sử dụng TrueType-Fonts (TTF) hoặc Web Open Font Format (WOFF).

— treo
nguồn
13
Cả Internet Explorer và Firefox đều KHÔNG dựa trên Webkit, vì vậy theo tôi, đây là một giải pháp khá vô dụng.
— Casper
58
Nó không vô dụng vì nó là tiêu chuẩn: bạn càng thực hiện nó, nó càng có khả năng được trình duyệt triển khai. Điều đó không có nghĩa là bạn không nên tìm cách khác để bù đắp, nhưng sử dụng nó như một sự bổ sung có vẻ tốt cho tôi.
— e-satis
8
Firefox 3.1 không hỗ trợ @ font-face.
— Ms2ger
2
@brendanjerwin: phiên bản cập nhật của liên kết của bạn - brendanjerwin.com/development/web/2009/03/03/ mẹo
— Matt Ball
60
Này các bạn, đoán xem? Bây giờ là gần năm 2016! Bây giờ nó được hỗ trợ rộng rãi! Yay! Vui mừng, tôi tìm thấy câu trả lời này muộn. Haha.
— jessica
121

Bạn có thể thêm một số phông chữ thông qua Google Web Fonts .

Về mặt kỹ thuật, các phông chữ được lưu trữ tại Google và bạn liên kết chúng trong tiêu đề HTML. Sau đó, bạn có thể sử dụng chúng một cách tự do trong CSS với @font-face( đọc về nó ).

Ví dụ:

Trong <head>phần:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Sau đó, trong CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

Giải pháp có vẻ khá đáng tin cậy (thậm chí Tạp chí Smashing cũng sử dụng nó cho một tiêu đề bài viết. ). Tuy nhiên, cho đến nay không có nhiều phông chữ có sẵn trong Thư mục Phông chữ của Google .

— Michał Pękała
nguồn
1
Vào tháng 7 năm 2014, google đã mở rộng các phông chữ và bao gồm các phông chữ Google Noto hỗ trợ hầu hết các ngôn ngữ google.com/get/noto/# . Abobe đã hỗ trợ sáng kiến ​​phông chữ mở này hỗ trợ tất cả các ngôn ngữ blog.typekit.com/2014/07/15/intributioning-source-han-sans
— vsingh
có vẻ như (phông chữ web của Google) không hỗ trợ các phiên bản phông chữ .eot và .woff và .svg. nó chỉ hỗ trợ phiên bản .ttf của phông chữ!
— Mahdi Jazini
77

Cách để đi là sử dụng khai báo CSS @ font-face cho phép các tác giả chỉ định phông chữ trực tuyến để hiển thị văn bản trên các trang web của họ. Bằng cách cho phép các tác giả cung cấp phông chữ của riêng họ, @ font-face loại bỏ nhu cầu phụ thuộc vào số lượng phông chữ hạn chế mà người dùng đã cài đặt trên máy tính của họ.

Hãy xem bảng sau:

nhập mô tả hình ảnh ở đây

Như bạn có thể thấy, có một số định dạng mà bạn cần biết chủ yếu là do khả năng tương thích giữa nhiều trình duyệt. Kịch bản trong thiết bị di động không khác nhiều.

Các giải pháp:

1 - Tương thích trình duyệt đầy đủ

Đây là phương pháp với sự hỗ trợ sâu sắc nhất có thể ngay bây giờ:

@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 */
}

2 - Hầu hết các trình duyệt

Tuy nhiên, mọi thứ đang thay đổi rất nhiều về WOFF , vì vậy bạn có thể thoát khỏi:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Chỉ các trình duyệt mới nhất

Hoặc thậm chí chỉ là WOFF.
Sau đó, bạn sử dụng nó như thế này:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Tài liệu tham khảo và đọc thêm:

Đó chủ yếu là những gì bạn cần biết về việc thực hiện tính năng này. Nếu bạn muốn nghiên cứu thêm về chủ đề này, tôi sẽ khuyến khích xem qua các tài nguyên sau. Hầu hết những gì tôi đặt ở đây được trích xuất từ ​​sau

— Javier Cadiz
nguồn
2
Công cụ Font Squirrel cực kỳ tiện dụng có thể tạo CSS cần thiết cho hỗ trợ trình duyệt đầy đủ. Nó thậm chí còn cho phép bạn tải lên phông chữ như bất kỳ một trong các định dạng này, chuyển đổi nó thành tất cả các định dạng khác và cho phép bạn tải xuống tất cả các định dạng. Đó là một trình bảo vệ cuộc sống khi nói đến các phông chữ tùy chỉnh.
— Jacob Stamm
Không đại diện svgFontNamecho cái gì? Tôi nên thay đổi nó thành tên gia đình phông chữ của tôi hoặc để nguyên như vậy?
— Gherman
17

Nếu theo phông chữ không chuẩn, bạn có nghĩa là phông chữ tùy chỉnh của định dạng chuẩn, đây là cách tôi thực hiện và nó hoạt động cho tất cả các trình duyệt tôi đã kiểm tra cho đến nay:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

vì vậy bạn sẽ chỉ cần cả phông chữ ttf và eot. Một số công cụ có sẵn trực tuyến có thể thực hiện chuyển đổi.

Nhưng nếu bạn muốn đính kèm phông chữ ở định dạng không chuẩn (bitmap, v.v.), tôi không thể giúp bạn.

— BiAiB
nguồn
1
Ví dụ về công cụ trực tuyến: kirsle.net/wizards/ttf2eot.cgi Ví dụ về công cụ ngoại tuyến: code.google.com/p/ttf2eot/wiki/Demo - cũng có thể sử dụng phông chữ WOFF .
— Wilf
11

Tôi đã thấy rằng cách dễ nhất để có phông chữ không chuẩn trên trang web là sử dụng sIFR

Nó liên quan đến việc sử dụng một đối tượng Flash có chứa phông chữ, nhưng nó làm giảm độc đáo thành văn bản / phông chữ tiêu chuẩn nếu Flash không được cài đặt.

Kiểu được đặt trong CSS của bạn và JavaScript thiết lập thay thế Flash cho văn bản của bạn.

Chỉnh sửa: (Tôi vẫn khuyên bạn nên sử dụng hình ảnh cho các phông chữ không chuẩn vì sIFR thêm thời gian cho một dự án và có thể yêu cầu bảo trì).

— Matt
nguồn
24
Thật là một ý tưởng khủng khiếp! Tôi có flash trong trình duyệt của mình nhưng flashblock cũng vậy. Trên trang web đó, trình duyệt của tôi hiển thị một trang bị lỗi khủng khiếp. Flash nên ở lại một cái gì đó mà bạn sử dụng cho hình ảnh động hoặc phim lớn. Quá nhiều đèn flash rất tệ và trực quan, ... của tôi
— e-satis
2
@ e-satis: Làm sao vậy? Cá nhân, tôi không bao giờ nhận thấy sự khác biệt giữa một trang sử dụng sIFR và một trang không, ngoài những khác biệt về kết xuất văn bản tinh tế. Tôi nghĩ rằng đó là một ý tưởng tuyệt vời, trung thực, mặc dù @font-faceđược hỗ trợ tốt hơn nhiều.
— Sasha Chedygov
"Chỉnh sửa: (Tôi vẫn khuyên bạn nên sử dụng hình ảnh cho các phông chữ không chuẩn vì sIFR thêm thời gian cho một dự án và có thể yêu cầu bảo trì)." nói rất hay. sIFR là một kỹ thuật thực sự tuyệt vời nhưng nó dường như đòi hỏi rất nhiều để có được giao diện CHÍNH XÁC mà bạn muốn. Nếu bạn có thời gian để học và thành thạo kỹ thuật này, tôi đánh giá cao nó. Nhưng nếu bạn đang tìm kiếm một kỹ thuật thay thế phông chữ nhanh chóng và dễ dàng, tôi sẽ sử dụng thay thế hình ảnh hoặc thậm chí là thuộc tính css @ font-face css
— Derek Adair
10

Typeface.js và cufon hai lựa chọn thú vị khác. Chúng là các thành phần JavaScript hiển thị dữ liệu phông chữ đặc biệt ở định dạng JSON (mà bạn có thể chuyển đổi từ định dạng TrueType hoặc OpenType trên trang web của chúng) thông qua phần tử <canvas> mới trong tất cả các trình duyệt mới hơn trừ Internet Explorer và qua VML trong Internet Explorer.

Vấn đề chính với cả hai (tính đến thời điểm hiện tại) là việc chọn văn bản không hoạt động hoặc ít nhất chỉ hoạt động khá khó xử.

Tuy nhiên, nó là rất tốt đẹp cho tiêu đề. Văn bản cơ thể ... Tôi không biết.

Và nó nhanh đến mức đáng ngạc nhiên.

— Thomas
nguồn
Một tùy chọn thú vị khác là typekit.com Khái niệm tương tự.
— Zack
8

Hoặc bạn có thể thử sIFR . Tôi biết nó sử dụng Flash, nhưng chỉ khi có sẵn. Nếu Flash không khả dụng, nó sẽ hiển thị văn bản gốc ở phông chữ gốc (CSS).

— Casper
nguồn
4

Kỹ thuật mà W3C đã khuyến nghị để thực hiện điều này được gọi là "nhúng" và được mô tả kỹ bởi ba bài viết ở đây: Nhúng phông chữ . Trong các thử nghiệm hạn chế của mình, tôi đã tìm thấy quy trình này dễ bị lỗi và đã hạn chế thành công trong việc làm cho nó hoạt động trong môi trường nhiều trình duyệt.

— Steve Moyer
nguồn
4

Cả Safari và Internet Explorer đều hỗ trợ quy tắc khuôn mặt phông chữ CSS @, tuy nhiên chúng hỗ trợ hai loại phông chữ nhúng khác nhau. Firefox đang có kế hoạch hỗ trợ cùng loại với Apple một thời gian sớm. SVG có thể nhúng phông chữ nhưng chưa được hỗ trợ rộng rãi (chưa có plugin).

Tôi nghĩ rằng giải pháp di động nhất mà tôi thấy là sử dụng chức năng JavaScript để thay thế các tiêu đề, v.v. bằng một hình ảnh được tạo và lưu vào bộ đệm trên máy chủ bằng phông chữ bạn chọn - theo cách đó bạn chỉ cần cập nhật văn bản và không phải những thứ xung quanh trong Photoshop.

— zobier
nguồn
Điều này không phải được thực hiện với JavaScript. Tôi biết rằng ngày nay nhiều người thích sử dụng JavaScript cho khá nhiều thứ, nhưng một kỹ thuật CSS tiêu chuẩn có thể phù hợp hơn ở đây. Xem sitepoint.com/article/header-images-css-xhtml
— hangy
Tôi xin lỗi nếu có sự nhầm lẫn, kỹ thuật này không đề cập đến phương pháp thay thế hình ảnh, như bạn nói, có thể là CSS. Đó là về việc tạo đồ họa đại diện cho một chuỗi nhất định theo một phông chữ / kiểu cụ thể, một cách nhanh chóng, tại máy chủ - tránh sự cần thiết phải tạo các chuỗi này theo cách thủ công.
— zobier
4

Nếu bạn sử dụng ASP.NET, thật dễ dàng để tạo phông chữ dựa trên hình ảnh mà không cần phải cài đặt (như thêm vào cơ sở phông chữ đã cài đặt) trên máy chủ bằng cách sử dụng:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

và sau đó vẽ với phông chữ đó lên a Graphics.

— mờ
nguồn
1
tốt, vâng ... Và người dùng của bạn có thể quên đi việc sao chép và dán. Và phóng to quá, trong các trình duyệt cũ. Tôi thậm chí không nói về các vấn đề băng thông!
— e-satis
2
Vâng, ok, và câu hỏi xác định rằng nó sẽ được sử dụng cho văn bản nội dung? Không, nó không phải, đó là một câu hỏi chung chung, và đây là một câu trả lời chung chung. Các đoạn văn bản nhỏ, tiêu đề, v.v., không chiếm nhiều băng thông. Sheesh, có được một nắm!
— mattlant
3

Có vẻ như nó chỉ hoạt động trong Internet Explorer, nhưng một tìm kiếm nhanh của Google về "phông chữ nhúng html" mang lại http://www.spoono.com/html/tutorials/tutorial.php?id=19

Nếu bạn muốn duy trì nền tảng bất khả tri (và bạn nên!) Bạn sẽ phải sử dụng hình ảnh, nếu không thì chỉ cần sử dụng một phông chữ tiêu chuẩn.

— James
nguồn
3

Tôi đã nghiên cứu một chút và đào lên Thay thế văn bản động (xuất bản 2004-06-15).

Kỹ thuật này sử dụng hình ảnh, nhưng dường như là "rảnh tay". Bạn viết văn bản của mình và bạn để một vài tập lệnh tự động thực hiện tự động tìm và thay thế trên trang cho bạn một cách nhanh chóng.

Nó có một số hạn chế, nhưng có lẽ đây là một trong những lựa chọn dễ dàng hơn (và tương thích với trình duyệt hơn) so với tất cả những phần còn lại tôi từng thấy.

— Kent Fredric
nguồn
3

Cũng có thể sử dụng phông chữ WOFF - ví dụ ở đây

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
— Wilf
nguồn
3

Chỉ cần cung cấp liên kết đến phông chữ thực tế như thế này và bạn sẽ ổn

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
— Abhijeet Kumar
nguồn
Một thay thế đơn giản tốt. Và bạn chắc chắn có quyền sử dụng nó. Xem nhà phát
— Tim Erickson
2

Cách JavaScript của typeface.js:

Với typeface.js, bạn có thể nhúng phông chữ tùy chỉnh vào các trang web của mình để bạn không phải kết xuất văn bản thành hình ảnh

Thay vì tạo hình ảnh hoặc sử dụng flash chỉ để hiển thị văn bản đồ họa của trang web của bạn theo phông chữ bạn muốn, bạn có thể sử dụng typeface.js và viết bằng HTML và CSS đơn giản, giống như khách truy cập của bạn đã cài đặt phông chữ cục bộ.

http: //typeface.neoc nền.org /

— bánh mì
nguồn
2

Nếu bạn có một tệp phông chữ của mình, thì bạn sẽ cần thêm nhiều định dạng của phông chữ đó cho các trình duyệt khác.

Với mục đích này, tôi sử dụng trình tạo phông chữ như Fontsquirrel, nó cung cấp tất cả các định dạng phông chữ & CSS @ font-face CSS của nó, bạn sẽ chỉ cần kéo và thả nó vào tệp CSS của mình.

— saadeez
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.