RSSwordpress

Tăng sức mạnh cho giao diện bằng Cufón

Ngày hôm qua có bạn hỏi mình làm cách nào sử dụng Cufón vào theme WordPress, nhớ lại hồi lúc thêm cái Cufón này váo site mà mất cả 1 tiếng đồng hồ để mò. Do đó mình mạn phép viết một bài chi tiết hướng dẫn cách chèn Cufón vào trang web của bạn, không cần là WordPress, có thể là cả Joomla, Drupal… nhằm tăng sức mạnh cho giao diện của bạn.

Giới thiệu về Cufón

Công cụ Cufón

Chắc hẳn bạn muốn website của mình sử dụng một font chữ bay bổng, ấn tượng nào đó, nhưng để người xem nhìn được font đó thì trên máy tính của người đó phải cài font đó rồi, do đó Cufón ra đời để vẫn có thể hiện thì font theo ý muốn mà không cần biết máy người dùng đã cài font đó hay chưa.

Khi sử dụng Cufón, nó sẽ dùng JavaScript để render font với Canvas hoặc VML. Do vậy khi sử dụng Cufon chúng ta có thể chạy được hầu hết các trình duyệt phổ biến hiện nay.  (dùng Cufón người truy cập cũng không thể copy được do đó đã không còn là dạng chữ)

Một văn bản được hiển thị bằng Cufón

Các bước thêm Cufón vào giao diện

B1. Tìm font theo ý bạn .

Ở bước này ta cần lưu ý những điểm sau:

  • Nếu bạn dùng Cufón cho mục đích viết bài tiếng việt có dấu, bạn cần chọn 1 font chữ UTF8 có đầy đủ các kí tự tiếng việt (nếu không khi sử dụng sẽ xảy ra hiện tượng mất dấu, thiếu chữ)
  • Nên tìm loại font nào có đầy đủ các dạng: Regular typeface(kiểu thường), Bold typeface(đậm), Italic typeface(nghiêng), Bold Italic typeface (đậm + nghiêng) để khi dùng sẽ thể hiện tốt nhất theo ý muốn của bạn.

Sau khi bạn tìm được font ưng ý rồi thì download về máy nhé.

B2. Tạo font

Trước hết, bạn sử dụng công cụ generator của Cufón để tạo và tùy biến cách mà font được thể hiện. Sau khi tạo xong bạn sẽ có được link download file javascript với các thông tin về font mà Cufón có thể đọc nó.

Bạn chọn trong các mục Regular typeface(kiểu thường), Bold typeface(đậm), Italic typeface(nghiêng), Bold Italic typeface (đậm + nghiêng) đến thư mục mà bạn đã download font lúc nãy.

Lưu ý:

  • Cufón chỉ hỗ trợ TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB).
  • Nếu font bạn cần không có các dạng  Bold typeface(đậm), Italic typeface(nghiêng), Bold Italic typeface (đậm + nghiêng) thì bạn có thể bỏ qua và chỉ chọn  Regular typeface(kiểu thường).

Ở mục The EULAs of these fonts allow Web Embedding (without Adobe Flash) hãy đánh dấu vào mục này.

Các bạn bỏ qua các mục còn lại (các mục này không cần lưu ý lắm) và đến phần Include the following glyphs (if available), bạn check vào Basic Latin, trong mục .. and also these single characters bạn thêm vào đoạn sau:

Nếu chọn tất cả các ký tự sẽ làm file js trở nên phình to, lúc load trang web sẽ ảnh hưởng đến tốc độ. Do đó các bước ở trên giúp bạn vừa hiển thị đầy đủ mà vẫn không làm ảnh hưởng tới tốc độ trang là mấy.

Ở phần Security bạn điền tên miền trang web của bạn vào (hoặc nếu không cần thì bỏ qua bước này cũng không sao). Bỏ qua các phần khác, đến mục Terms thì check vào ô I acknowledge and accept these terms sau đó chọn Let’s do this! để tạo font.

Lúc này bạn nhận được 1 file js là “tên-font-của-bạn.font.js”, Lưu về máy và chuyển qua B3

B3. Thêm Cufón vào trang web của bạn

Bạn download file cufon-yui.js phiên bản 1.09i. Upload file cufon-yui.js và fie  tên-font-của-bạn.font.js mà bạn vừa tạo lúc nãy lên cùng với thư mục giao diện. VD nếu bạn dùng WordPress thì upload lên “theme/tên-giao-diện/js/”, nếu không có thư mục js thì bạn có thể tự tạo để sau này dễ quản lí.

Lưu ý: Bạn có thể đổi tên 2 file này nếu muốn

Bây giờ là đến phần chèn vào trang web của bạn, ở đây mình chỉ hướng dẫn cụ thể cách cài cho them WordPress, các source khác cũng tương tự.

Bạn mở file footer.php trong thư mục giao diện, tìm:

Thêm  lên trước: 

Vì sao mình lại chèn vào footer? Bởi vì để các đoạn script cuối cùng sẽ đẩy nhanh tốc độ load trang. Do đó mình chèn vào footer, nếu bạn không muốn vậy vẫn có thể thêm vào header.php trước thẻ </head> Các bạn lưu ý thư mục chứa 2 file js này để thay đổi cho phù hợp.

Tiềp tục thêm vào sau: 

Bạn cần lưu ý ở dòng này Cufon.replace(‘h1‘); hãy thay thế h1 bằng những gì bạn cần hiển thị. Để biết rõ hơn hãy mở file css của giao diện bạn ra và tìm những vị trí thích hợp để thay thế bằng cufón. VD mình muốn cufón hiển thị ở phần chữ h1, h2 và .main h3 thì mình làm như sau

Vậy là ở những vị trí như <h1>Tiêu đề 1</h1>,  <h2>Tiêu đề 1</h2> ,  <h3>Tiêu đề 1</h3>  sẽ được hiển thị font chữ cufón.

Như vật là bạn đã có thể sở hữu một blog/trang web có font độc đáo rồi, và bây giờ bạn hãy khám phá và tận dụng tối đa sức mạnh của Cufón cho giao diện của bạn nhé! Một lần nữa cảm ơn tác giả Cufón đã cho ra một bộ công cụ hay và tiện ích!

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu