Cufon phông chữ joomla lưu trữ

Michael Soriano trong Snippets 13 tháng 10 năm 2009 70 Comments

Tôi là một fan hâm mộ lớn của WooThemes. Dường như mỗi khi họ đi ra với một chủ đề - họ đẩy ranh giới của thiết kế web. Hãy nhìn vào sự sáng tạo mới nhất của họ: Therapy - Tôi không thể giúp đỡ, nhưng rơi vào tình yêu với gradient background tốt, transparencies trơn tru và liền mạch và các cạnh tròn đẹp. Nhưng những gì tôi thực sự thích về Therapy là nó typography tuyệt vời. Tôi tự nói với mình: “đó là sử dụng tuyệt vời của sIFR”. Vì vậy, tôi phải nhấp vào một tiêu đề bài, mong đợi để xem “Giới thiệu về Macromedia Flash” entry - nhưng không thấy nó. Vì vậy, tôi hỏi tự bối rối của tôi: “nếu nó không sIFR, sau đó là những gì chuyển đổi tất cả văn bản động này?”

Tôi kiểm tra phần tử trong Firebug - sau đó tôi thấy span class “cufon” ở khắp mọi nơi.

Vì vậy, những gì trên thế giới cufon là?

Cufon được định nghĩa là “thay thế văn bản nhanh với vải và VML”. Nó cũng tuyên bố là một sự thay thế xứng đáng để sIFR - đó là, đối với những người không quen thuộc - là viết tắt của Scalable Inman flash thay thế. sIFR là công nghệ được sử dụng bởi các nhà thiết kế web để thay thế văn bản động với phông chữ phi web an toàn. Mặc dù sIFR đã làm một công việc ổn với thay thế văn bản - nó đã được chứng minh là khá khó khăn để thiết lập. Tôi đã sử dụng sIFR trong một vài dự án trong quá khứ và không thừa nhận rằng nó không phải là điều đơn giản nhất để có được đi. Ngày đầu đó - sIFR dường như một lỗi bit, cũng như làm chậm tải trang. Đây là những hậu quả nghiêm trọng để xem xét cho giá của việc sử dụng một phông chữ độc đáo cho trang của bạn.

Vì vậy, tôi đã đi trước và cố gắng cufon. Để kinh ngạc của tôi, các bước sau đây là tất cả những gì nó cần để hoàn toàn “Cufonize” trang web của bạn. * Hãy tha thứ cho việc sử dụng các thuật ngữ “cufonize” - nghe có vẻ buồn cười, nhưng sau khi bạn hãy thử các bước, bạn cũng sẽ “cufonize” trang của bạn.

Bước 1: Nhận cufon

Điều đầu tiên bạn cần là tải lõi javascript tập tin có trách nhiệm cho việc vẽ của phông chữ tùy chỉnh của bạn bên trong HTML của bạn. Trưởng vào cufon.shoqolate.com/generate/ và kích chuột phải vào “Download” tab - chọn “Save Link As ...” Lưu cufon-yui.js vào một thư mục địa phương trong máy tính của bạn.

Bước 2: Tạo Font của bạn

Trên trang cùng một lúc cufon.shoqolate.com/generate/ - click vào trường “kiểu chữ thông thường” - và duyệt đến phông chữ của bạn mong muốn trong máy tính cục bộ của bạn.

Phần còn lại của lĩnh vực tải lên là không bắt buộc. Tôi rời tất cả trong số họ mặc định vì lợi ích của việc hướng dẫn này ngắn. Chỉ cần chắc chắn - bạn đang sử dụng một phông chữ mà là legit để sử dụng, kiểm tra ngoài khơi EULA và các Điều khoản của Hiệp định. Click vào “Hãy làm điều này” nút ở phần cuối cùng của trang đó.

Điều này sẽ tạo ra một phông chữ tùy chỉnh mã javascript cho bạn - tùy thuộc vào sự lựa chọn phông chữ của bạn. Trong trường hợp của tôi, tôi nhặt cái gì đó rất un-phi thường: Gigi.TTF - mà tạo ra một file có tên Gigi_400.font.js.

Đi trước và lưu tập tin này trong cùng thư mục mà bạn đã lưu các tập tin lõi cufon-yui.js và chúng tôi đã sẵn sàng để xây dựng trang web của bạn:

Bước 3: Cufonize trang của bạn

Tất cả các bạn thực sự cần phải làm từ thời điểm này là liên kết tới các file javascript trong phần đầu của HTML của bạn. Ngoài ra hãy chắc chắn rằng cufon-yui.js được gọi trước các tập tin font.js:

Để bắt đầu quá trình thay thế - tạo ra một kịch bản tùy chỉnh như dưới đây:

Các kịch bản ở trên là nói sự cufon để thay thế tất cả các thẻ H3 và P để phông chữ tùy chỉnh của chúng tôi.

Lưu ý rằng nếu bạn muốn nhắm đến yếu tố cụ thể trong trang của bạn giống như cách bạn gán lớp CSS và Ids, bạn phải sử dụng một khuôn khổ như jQuery mà sẽ cho phép bạn làm một điều như vậy. Để tải về jQuery, đi đến docs.jquery.com/Downloading_jQuery. Hãy chắc chắn rằng bạn liên kết đến tập tin này TRƯỚC lõi cufon-yui.js trong tiêu đề của bạn.

Với thư viện jQuery tại chỗ, bây giờ bạn có thể chọn các yếu tố cụ thể hơn trong trang của bạn (hashtags cho các ID và thời gian cho các lớp học). Xem mã ví dụ dưới đây:

Đoạn mã trên sẽ Cufonize chỉ các thẻ h3 với id của “chuyển đổi-me”, và p thẻ với id của “chuyển đổi-me-quá”.

Phần kết luận:

Đó là về cơ bản nó! Đó là tất cả phải mất để bạn có thể sử dụng bất kỳ font bạn thích vào các trang web của bạn. Những gì tôi thích nhất về cufon là nó nhanh chóng và nó hoạt động. Bạn cũng sẽ thấy rằng thuộc tính CSS chung như màu sắc, kích thước và vị trí vẫn được áp dụng trên các phông chữ biến đổi. Để tìm hiểu thêm về các chi tiết cụ thể của cufon styling - xem wiki.github.com/sorccu/cufon/styling.

Nhiều đối với những người tạo ra cufon. Tôi chắc chắn điều này đánh dấu một xu hướng mới trong typography web. Để các folks tại WooThemes: tiếp tục đẩy ranh giới - công việc của bạn là nguồn cảm hứng cho các nghệ sĩ thuần túy web ở khắp mọi nơi.

Ai đang dùng cufon?

Danh sách sau đây của trang web đang sử dụng thay thế văn bản cufon trong các trang của họ:

Học viện bóng bầu dục quốc tế

Thuần hóa những Lưới - Căn bài viết WordPress của bạn một cách hoàn hảo sử dụng PHP và CSS

Tạo một trang duy nhất danh mục đầu tư từ Scratch - Phần 1: Photoshop Mockup

70 Comments

25 Tháng 10 năm 2009 tại 07:18

Tôi có kế hoạch thử cufonize ngay và chỉ thấy bài viết tuyệt vời của bạn. Nhờ để chia sẻ.

Ngày 28 tháng 10 năm 2009 tại 11:15

Tôi đang sử dụng plugin WP-cufon (www.tobias-battenberg.de/wp-cufon/) trên hai trang web WordPress. Khá tốt, nhưng không hoàn hảo. Có một chút chậm trễ khi tải trang cho phông chữ xuất hiện và “hack” dường như không che đậy nó. Tôi cũng đã gặp rắc rối với nó làm việc trên trang chủ và các trang khác là chủ đề tôi đã sử dụng mã hóa chúng khác nhau.

Việc làm này ba tháng trước (có nhu cầu cho một bài viết như thế này) Tôi đã gặp rắc rối chuyển đổi phông chữ để js Tôi nghĩ đó là. Tôi phải làm điều đó một vài lần để có được nó đúng.

Trang web này là gần như hoàn tất và bạn có thể thấy việc sử dụng một Museo_300 phông chữ miễn phí:
lightonsolutions.com/

Tôi sẽ đăng các trang web ví dụ khác khi nó được hoàn tất.

Cảm ơn lần nữa vì bài báo.

Ngày 28 tháng 10 năm 2009 tại 12:19

Chuột phải vào! font Museo_300 là một phông chữ đẹp. Làm tốt lắm!

Ngày 4 tháng 11 năm 2009 tại 09:40

chỉ tôi muốn biết làm thế nào để áp dụng “id” và “đẳng cấp” trong cufon.

xin vui lòng cho trong url dụ sitor ngắn gọn và cũng có.

Ngày 4 tháng 11 năm 2009 tại 09:56

- Bạn nhắm mục tiêu các yếu tố bằng cách sử dụng đồng bằng javascript hoặc jquery selectors. Tôi thấy cách jquery để được dễ dàng hơn.

Ví dụ. Giả sử bạn muốn cufonize tất cả các chức danh h3 trong trang của bạn với một lớp học của “sub-title”, bạn nói với kịch bản: cufon.replace ( ‘h3.subtitle’)

Ngày 4 tháng 11 năm 2009 tại 10:02

hi cảm ơn cho câu trả lời quik.
nhưng một số vấn đề.

tôi đang sử dụng code..but này không nhận được bất kỳ thay đổi.

Cufon.replace ( ‘h3.subtitle’, textShadow: ‘2px 2px # 666 ',
Cỡ chữ: ‘17px’,
màu: ‘-linear-gradient (#fff, 0,2 = # fff, 0,5 = # fff, #fff)’,
di chuột: textShadow: ‘2px 2px # 9d9d9d’,
màu: '-linear-gradient (# d4d4d4, trắng)

Ngày 6 tháng 11 năm 2009 tại 05:25

hi cảm ơn cho câu trả lời quik.
nhưng một số vấn đề.

tôi đang sử dụng code..but này không nhận được bất kỳ thay đổi.

Cufon.replace (’h3.subtitle’, textShadow: ‘2px 2px # 666 ',
Cỡ chữ: ‘17px’,
màu: ‘-linear-gradient (#fff, 0,2 = # fff, 0,5 = # fff, #fff)’,
di chuột: textShadow: ‘2px 2px # 9d9d9d’,
màu: '-linear-gradient (# d4d4d4, trắng)

23 tháng 12 năm 2009 tại 09:31

Cám ơn rất hữu ích “fool-proof” hướng dẫn này. Tôi có một khách hàng mà hỏi tôi một số câu hỏi xung quanh các kỹ thuật thay thế văn bản, tôi sẽ để cho anh ta liên kết của bạn để anh có thể đọc cho chính mình.

Bằng cách này tôi chia sẻ tình cảm của mình về WooThemes, tôi có thể bị sai lệch như tôi là một thử nghiệm beta cho họ

Tháng Bảy 27, 2010 lúc 6:30 chiều

đẹp bài viết!
i dùng cufon kết hợp với PHP và jQuery trên một trang web công ty du lịch thời gian gần đây - hoạt động tuyệt vời!
i sử dụng nó để tạo kiểu text động trên một rotator tính năng và đặc biệt năng động trên trang chủ (shipsandtripstravel.com) và sử dụng nhiều phông chữ trên trang lời chứng của họ (shipsandtripstravel.com/about/testimonials.html)

Ngày 28 tháng 7 năm 2010 tại 11:28

@Gregg - đó là một trang web ấn tượng. làm cho tôi muốn đi du lịch

29 Tháng 4 năm 2012 tại 14:54

Cảm ơn bạn rất nhiều. Hài hước tôi thấy bài viết của bạn bởi vì tôi đã làm điều rất tương tự như bạn đã làm ... nghĩ một phông chữ phải là một tập tin img cho đến khi tôi sử dụng công cụ nhà phát triển của Google và nghe nói về cufon cho lần đầu tiên. Không phải là nó tốt hơn để sử dụng thư viện jQuery của Google mặc dù ??

// Bạn có thể chỉ định số phiên bản phần, chẳng hạn như “1” hoặc “1.3”,
// với kết quả tương tự. Làm như vậy sẽ tự động nạp
// phiên bản mới nhất phù hợp mà mô hình sửa đổi một phần
// (ví dụ 1.3 sẽ tải 1.3.2 hôm nay và 1 sẽ tải 1.7.2).
google.load ( “jquery”, “1.7.2”);

google.setOnLoadCallback (function () // Nơi init mã ở đây thay vì $ (document) .ready ()
>);

Chúc mừng và giữ nội dung lớn này chảy!

Steve
Kingston, ON Canada

Ngày 30 tháng 4 năm 2012 tại 09:50

không ai có vấn đề với cufon? i “cufonized” font của tôi, đã làm tất cả để làm cho nó làm việc trong trang web của tôi và hơn ... phông chữ cufon thay đổi mọi thứ. điều không còn ở đúng nơi đó? nó đã xảy ra với bất cứ ai chưa?

05 tháng năm 2012 tại 07:16

những gì cufin phông chữ được sử dụng trị liệu?

Những bài viết liên quan

Các tính năng: - Tạo file sitemap.xml trực tuyến miễn phí - Có thể xử lý không giới hạn số trang * - Cung cấp Google sitemap / XML site map validator - Báo cáo phá vỡ liên kết - bổ sung, mà không ...

Thanks for the info Michaelson. Tôi đã tải về Firebug và nó là một nguồn tuyệt vời! Tôi đã có thể xác định vị trí các dòng mã trong file css. Tuy nhiên, một vấn đề mới đã xuất hiện: các template.css ...

Joomla 2.5 đã đạt kết thúc của cuộc sống như đối với 2014/12/31. Xin thông báo này có thể là một nguy cơ bảo mật cho website của bạn. Bạn có thể xem thêm thông tin về sự kết thúc của cuộc sống ở đây. Do họ...

Trong Joomla 2.5 / 3, bạn có thể sử dụng mẫu nhiều hơn một thiết kế trong trang web của bạn. Điều này có nghĩa rằng bạn có thể tạo một trang web với các nhóm trang con, hoặc thậm chí trang con, cá nhân có một độc đáo ...

XML file là gì? Các Extensible Markup Language, hay XML là một trong những định dạng mở phổ biến nhất là sử dụng cho việc lưu trữ, cơ cấu, thao tác và vận chuyển dữ liệu. Một trong những chính ...