Kỹ thuật và công cụ thực hành thay thế hình ảnh động

Khi nói đến thiết kế web, không nên kìm hãm sự sáng tạo của thiết kế bởi các lựa chọn hạn chế về phông chữ web được hỗ trợ mà chúng tôi gọi là phông chữ an toàn trên web. Nhà thiết kế nên có quyền tự do sử dụng bất kỳ phông chữ nào họ thích trên tiêu đề và nội dung.

Năm 2005, thay thế hình ảnh động đã được phổ biến với một kỹ thuật gọi là Thay thế Flash Inman có thể mở rộng (sIFR). Được phát triển bởi Shaun Inman, sIFR tận dụng Javascript và Adobe Flash để cho phép các nhà thiết kế web sử dụng bất kỳ phông chữ tùy chỉnh nào họ thích trên trang web và vẫn duy trì khả năng hiển thị cho những người không có phông chữ đó. Và khi web tiếp tục phát triển, ngày nay chúng ta có nhiều giải pháp thay thế hơn bằng cách sử dụng các công nghệ khác nhau, chỉ trong trường hợp bạn không phải là một fan hâm mộ của Flash.

Không phải chờ đợi thêm, chúng ta hãy xem một số kỹ thuật để đạt được Thay thế hình ảnh động.

Kỹ thuật thường dùng

Dưới đây là một số kỹ thuật được sử dụng phổ biến nhất để thay thế hình ảnh động.

Thay thế Flash Inman có thể mở rộng (sIFR)

sIFR là một trong những phương pháp phổ biến nhất để nhúng phông chữ tùy chỉnh trên các trang web. Nó sử dụng Javascript và Flash để tạo kiểu chữ tùy chỉnh cho trang web của bạn và cho phép kiểu chữ được chuyển đổi có thể lựa chọn. Ngoài ra, kiểu chữ được chuyển đổi vẫn là văn bản trong mã nguồn để công cụ tìm kiếm vẫn có thể thu thập dữ liệu chúng.

sIFR 2 (được khuyến nghị) là bản phát hành ổn định hiện tại, tuy nhiên nếu bạn đang xem xét triển khai sIFR, bạn cũng nên biết rằng siFR 3 beta cũng có sẵn để tải về. Nó có thể là một lỗi nhỏ nhưng ít nhất nó giải quyết được vấn đề mở rộng phông chữ của sIFR 2.

Các công cụ cho sIFR có thể có ích:

sIFRvaultsIFRvault là kho lưu trữ phông chữ sIFR bạn có thể tải xuống.
máy phát điện sIFRCông cụ trực tuyến cho phép bạn tạo các tệp sIFR .swf với một vài cú nhấp chuột. Chỉ cần tải lên phông chữ TTF của phông chữ bạn muốn chuyển đổi, xem trước và tải xuống.
Chuyển đổi phông chữ sang sIFRTải lên phông chữ .TTF và trang web này sẽ chuyển đổi chúng thành tệp sIFR Flash.

sIFR Lite

SIFR ban đầu là 22k, vì vậy Dave quyết định làm lại nó bằng cách sử dụng một cách tiếp cận hướng đối tượng hơn, và kết quả? 3x nhỏ hơn ở mức 3,7k.

Thay thế văn bản động PHP + CSS (P + C DTR)

Như tên cho thấy, đây là một phương thức thay thế văn bản sử dụng PHP và CSS sử dụng phương thức ban đầu được mô tả bởi Tiếp viên Rosenberger. Nó cũng là một cải tiến từ phiên bản trước được phát triển bởi R. Marie Cox không hỗ trợ gói văn bản và thẻ bên trong. Một điều thú vị khác về P + C DTR là, văn bản hình ảnh có thể được tùy chỉnh bằng các thẻ CSS.

typeface.js

Những gì làm cho typeface.js Điều đặc biệt là họ chỉ sử dụng Javascript để nhúng phông chữ tùy chỉnh và kiểu có thể được tùy chỉnh thêm bằng HTML và CSS, không yêu cầu Flash. Nó là nguồn mở và hỗ trợ hầu hết các trình duyệt chúng ta đang sử dụng hiện nay, cho dù đó là Safari, Firefox, IE (6 trở lên).

Cá nhân sau một số thử nghiệm với typeface.js, chúng tôi nghĩ rằng có thể có một số phòng tiềm năng để cải thiện. Thứ nhất, các phông chữ có xu hướng hiển thị hơi khác nhau giữa các trình duyệt khác nhau. Nếu bạn đang sử dụng typeface.js, chúng tôi khuyên bạn nên kiểm tra trình duyệt chéo trước khi cho rằng những gì bạn thấy trong Firefox sẽ là những gì bạn thấy trong Safari. Văn bản cũng không thể chọn với typeface.js.

Phông chữ tùy chỉnh trong typeface.js không được biên dịch; có nghĩa là người dùng có thể tải xuống các phông chữ. Điều đó có thể dẫn đến vấn đề bản quyền. Chúng tôi khuyên bạn nên kiểm tra kỹ để đảm bảo các phông chữ bạn đang sử dụng có ổn để phân phối lại không.

Bánh mì

Không cần đèn flash, Bánh mì là một thay thế tuyệt vời cho sIFR và nó khá đơn giản để thực hiện. Trước tiên, bạn sử dụng trình tạo Cufon để tạo và tùy chỉnh phông chữ bạn muốn, sau đó bạn chèn Javascript Cufon vào mã nguồn của mình và bạn nói cho tập lệnh mà bạn muốn các phông chữ được tùy chỉnh.

Vấn đề lớn nhất với Cufon sẽ là vấn đề pháp lý khi sử dụng các phông chữ tùy chỉnh trực tuyến này. Vì nó được nhúng trong Javascript, nên bất kỳ ai xem mã nguồn đều có thể dễ dàng trích xuất nó. Phông chữ tùy chỉnh của Cufon không thể chọn, đó là cách tắt khác.

Nâng cơ mặt

Còn được biết là Thay thế hình ảnh Facelift (FLIR), đó là một phương pháp tuyệt vời khác để sIFR không yêu cầu Flash. Có vẻ như rất nhiều sự thay thế khác đang gặp phải trong vấn đề Flash của sIFR.

Facelift sử dụng Thư viện GD của PHP và PHP. Họ thừa hưởng vấn đề di sản của việc thay thế phông chữ tùy chỉnh - không thể chọn văn bản. Bên cạnh đó, chúng tôi nghĩ rằng nó cũng rất tuyệt.

Phương pháp khác

Các kỹ thuật trên có thể được sử dụng rộng rãi hơn, nhưng chúng tôi cũng nhận thấy một số cách khác để chuyển đổi văn bản của bạn thành các kiểu chữ tùy chỉnh đẹp mắt.

Loại Chọn

Loại chọn các đòn bẩy trên typeface.js, jQuery, canvas, toDataURL, các thuộc tính nền CSS và văn bản được phủ thực để đưa ra một kiểu chữ tùy chỉnh trên trang web của bạn. Lựa chọn văn bản hoạt động trên Firefox, Safari và thậm chí Chrome nhưng không phải IE.

Thay thế hình ảnh Swf (swfIR)

swfIR cung cấp cho bạn khả năng áp dụng một loại hiệu ứng hình ảnh cho bất kỳ hoặc tất cả hình ảnh trên trang web của bạn. Ví dụ: bạn có thể thêm bất kỳ hình ảnh nào trên trang web của mình và swfIR sẽ thêm đường viền tròn hơn, xoay định vị hoặc thậm chí thêm bóng cho nó.

Chín kỹ thuật thay thế hình ảnh CSS

Đây không phải là thay thế văn bản động, nhưng Chris Coyier thể hiện chín kỹ thuật CSS khác nhau để thay thế văn bản bằng hình ảnh; mỗi thẻ có một thẻ báo cáo liệt kê điều kiện - nếu hình ảnh được bật / tắt, CSS được bật / tắt.

Phông chữ

Phông chữ tận dụng Thay thế Flash Inman có thể mở rộng (sIFR) để thay đổi tiêu đề của bạn thành phông chữ tùy chỉnh. Tất cả bạn cần làm là tìm phông chữ, chọn nó và chèn mã vào đầu và tiêu đề của bạn sẽ được thay đổi ngay lập tức.

WordPress + Thay thế hình ảnh động

Nếu bạn là người dùng WordPress đang tìm giải pháp thay thế hình ảnh động cho tiêu đề hoặc thậm chí nội dung blog của bạn, rất có thể có plugin cho họ. Dưới đây là một số plugin thay thế văn bản mà chúng tôi biết.

Plugin WordPress sIFR - WP sIFRWP sIFR đã được tạo để loại bỏ các phức tạp khỏi việc nhận phông chữ tùy chỉnh trên trang web WordPress. Với WP sIFR, bạn chỉ phải tải tệp phông chữ SWF của mình lên thư mục plugin rồi đăng nhập, kích hoạt và định cấu hình tất cả các kiểu trong bảng Cài đặt.

Plugin Cufon WordPress - WP-CufonĐiều duy nhất bạn phải làm là chuyển đổi các tệp phông chữ của mình và tải chúng lên thư mục plugin. Bạn có thể kích hoạt các đối tượng bạn muốn được thay thế trong Menu Admin của WordPress.

Plugin thay thế hình ảnh Facelift (FLIR)HOA vì WordPress thân thiện với SEO và chỉ hiển thị hình ảnh trong trình duyệt nếu JavaScript được bật. Mã HTML / XHTML của bạn vẫn không thay đổi để các thẻ đầu của bạn có thể đọc được bởi các công cụ tìm kiếm và trang mà những người không có JavaScript có thể đọc được.

Bảng điều khiển Font burnerCác Phông chữ Plugin Control Panel cho phép bạn dễ dàng thêm bất kỳ hơn 1000 phông chữ miễn phí có sẵn trên trang web Font burner vào chủ đề WordPress của bạn.