Cufon fon joomla hosting

Oleh Michael Soriano dalam Coretan Oktober 13, 2009 70 Comments

Saya peminat besar WooThemes. Ia seolah-olah bahawa setiap kali mereka keluar dengan tema - mereka menolak sempadan reka bentuk web. Sila lihat pada ciptaan terbaru mereka: Therapy - saya tidak boleh membantu tetapi jatuh cinta dengan kecerunan latar belakang halus, transparensi licin dan lancar dan tepi bulat bagus. Tetapi apa yang saya benar-benar suka tentang Therapy adalah ia tipografi menakjubkan. Saya berkata kepada diri saya sendiri: "itulah penggunaan Kepercayaan yang sIFR". Jadi saya betul klik pada tajuk pos, menjangka untuk melihat "Mengenai Macromedia Flash" entry - tetapi tidak melihatnya. Lalu aku bertanya sendiri keliru saya: "jika ia tidak sIFR, kemudian apa yang menukarkan semua teks dinamik ini?"

fon Cufon joomla hosting Perkara yang sama anda

Saya memeriksa elemen dalam Firebug - maka saya melihat span class "cufon" mana-mana.

So What di dunia adalah Cufon?

Cufon ditakrifkan sebagai "penggantian teks cepat dengan kanvas dan VML". Ia juga mendakwa untuk menjadi alternatif yang layak untuk sIFR - yang, kepada mereka yang tidak biasa - bermaksud berskala Inman Flash penggantian. sIFR adalah teknologi yang digunakan oleh pereka web untuk menggantikan teks dinamik dengan fon bukan web selamat. Walaupun sIFR telah melakukan kerja yang baik-baik saja dengan penggantian teks - ia telah terbukti menjadi agak sukar untuk menubuhkan. Saya telah menggunakan sIFR dalam beberapa projek pada masa lalu dan yang mengakui bahawa ia bukan perkara yang paling mudah untuk bertindak. Di atas itu - sIFR kelihatan sedikit buggy, serta melambatkan beban halaman. Ini adalah akibat yang serius untuk mempertimbangkan untuk harga menggunakan font yang unik untuk laman anda.

Jadi saya pergi ke hadapan dan cuba Cufon. Untuk kehairanan saya, langkah-langkah berikut adalah semua yang diperlukan untuk sepenuhnya "Cufonize" halaman web anda. * Maafkan penggunaan "cufonize" istilah - ia mungkin kedengaran lucu, tetapi selepas anda cuba langkah ini, anda juga akan "cufonize" halaman anda.

Langkah 1: Dapatkan Cufon

Perkara pertama yang anda perlukan adalah untuk memuat turun teras javascript fail yang bertanggungjawab untuk rendering fon tersuai anda dalam HTML anda. Layari cufon.shoqolate.com/generate/ dan klik kanan "Muat turun" tab - pilih "Save Link As ..." Simpan cufon-yui.js ke dalam direktori tempatan dalam mesin anda.

Langkah 2: Menjana Font anda

Pada halaman yang sama pada cufon.shoqolate.com/generate/ - klik pada medan "muka taip biasa" - dan semak imbas ke font yang anda inginkan dalam mesin tempatan anda.

Yang lain daripada bidang upload adalah pilihan. Saya meninggalkan semua daripada mereka lalai demi membuat tutorial ini pendek. Hanya pastikan - anda menggunakan font yang legit untuk digunakan, memeriksa EULA dan Syarat Perjanjian. Klik pada "Mari kita Adakah Ini" Button pada akhir sangat atas laman itu.

Ini perlu menjana font adat javascript kod untuk anda - bergantung kepada pilihan font anda. Dalam kes saya, saya mengambil sesuatu yang sangat un-luar biasa: Gigi.TTF - yang menghasilkan satu fail bernama Gigi_400.font.js.

fon Cufon joomla hosting semua yang diperlukan untuk anda

Teruskan dan menyimpan fail ini dalam direktori yang sama di mana anda simpan teras fail Cufon-yui.js dan kami bersedia untuk membina halaman anda:

Langkah 3: Cufonize Page anda

Apa yang anda perlukan untuk dilakukan dari hal ini adalah untuk mengandungi pautan ke fail-fail javascript di bahagian kepala HTML anda. Juga pastikan bahawa cufon-yui.js dipanggil sebelum fail font.js:

Untuk memulakan proses gantian - membuat skrip adat seperti di bawah:

Skrip di atas memberitahu cufon untuk menggantikan semua tag H3 dan P untuk fon adat kami.

Ambil perhatian bahawa jika anda mahu untuk mensasarkan unsur-unsur tertentu dalam halaman anda dengan cara yang sama anda menetapkan kelas CSS dan Ids, anda perlu untuk menggunakan rangka kerja seperti jQuery yang akan membolehkan anda melakukan perkara seperti ini. Untuk memuat turun jQuery, pergi ke docs.jquery.com/Downloading_jQuery. Pastikan anda pautan ke fail ini SEBELUM teras cufon-yui.js dalam header anda.

Dengan perpustakaan jQuery di tempat, kini anda boleh memilih unsur-unsur yang lebih khusus dalam halaman anda (hashtags untuk ID dan tempoh untuk kelas). Melihat kod contoh di bawah:

Kod di atas akan Cufonize hanya tag h3 dengan id "menukar-me", dan tag p dengan id "menukar-me-terlalu".

kesimpulan:

Yang pada dasarnya ia! Itu sahaja yang ia mengambil masa untuk anda untuk menggunakan mana-mana font yang anda suka di laman web anda. Apa yang saya suka terbaik tentang Cufon adalah bahawa ia adalah cepat dan ia berfungsi. Anda juga akan mendapati bahawa sifat-sifat CSS umum seperti warna, saiz dan kedudukan masih terpakai pada fon berubah. Untuk mengetahui lebih lanjut mengenai khusus Cufon styling - lihat wiki.github.com/sorccu/cufon/styling.

Banyak berkenaan dengan orang-orang yang dicipta Cufon. Saya pasti ini menandakan satu trend baru dalam tipografi web. Untuk penduduk di WooThemes: terus menolak sempadan - kerja anda adalah inspirasi murni kepada artis web mana-mana.

Siapa Menggunakan Cufon?

Senarai berikut laman web telah menggunakan penggantian teks Cufon dalam laman-laman mereka:

Akademi Ragbi Antarabangsa

Taming Grid - Jajarkan jawatan WordPress anda dengan sempurna menggunakan PHP dan CSS

Buat Single Page Portfolio dari Scratch - Bahagian 1: Photoshop Mockup

70 Comments

25 Oktober 2009 pada 07:18

Saya mempunyai rancangan untuk cuba cufonize tidak lama dan hanya melihat artikel yang hebat anda. Terima kasih kerana berkongsi.

Oktober 28, 2009 pada 11:15

Saya menggunakan plugin WP-Cufon (www.tobias-battenberg.de/wp-cufon/) di dua tapak WordPress. Cukup baik, tetapi tidak sempurna. Terdapat sedikit kelewatan apabila halaman beban untuk fon hadir dan "hack" nampaknya tidak menutupinya. Saya juga mempunyai masalah dengan ia bekerja di halaman rumah dan halaman lain sebagai tema yang saya menggunakan berkod mereka berbeza.

Melakukan ini tiga bulan lalu (yang ingin untuk satu artikel seperti ini) saya mempunyai masalah menukar fon dengan JS Saya rasa ia adalah. Saya terpaksa melakukannya beberapa kali untuk mendapatkan ia betul.

Laman web ini adalah hampir selesai dan anda boleh melihat penggunaan percuma Museo_300 fon:
lightonsolutions.com/

Saya akan menghantar laman web contoh yang lain apabila ia selesai.

Terima kasih sekali lagi untuk artikel.

Oktober 28, 2009 pada 12:19

Di! font Museo_300 adalah font yang indah. Syabas!

November 4, 2009 pada 09:40

hanya saya ingin tahu bagaimana untuk memohon "id" dan "kelas" di cufon.

sila berikan secara ringkas dan juga contoh KRI Nusa Utara url.

November 4, 2009 pada 09:56

- Anda menyasarkan elemen dengan menggunakan plain javascript atau jquery pemilih. Saya mencari jalan jquery untuk menjadi lebih mudah.

Sebagai contoh. Katakanlah anda mahu cufonize semua tajuk h3 dalam halaman anda dengan kelas "sub-title", anda memberitahu skrip: cufon.replace ( 'h3.subtitle')

November 4, 2009 pada 10:02

hi terima kasih untuk maklum balas Quik.
tetapi beberapa masalah.

i am menggunakan code..but ini tidak mendapat apa-apa perubahan.

Cufon.replace ( 'h3.subtitle', textShadow: '2px 2px # 666',
FONTSIZE: '17px',
warna: '-linear-kecerunan (# fff, 0.2 = # fff, 0.5 = # fff, # fff)',
berlegar: textShadow: '2px 2px # 9d9d9d',
warna: '-linear-kecerunan (# d4d4d4, putih)

November 6, 2009 pada 05:25

hi terima kasih untuk maklum balas Quik.
tetapi beberapa masalah.

i am menggunakan code..but ini tidak mendapat apa-apa perubahan.

Cufon.replace ( 'h3.subtitle', textShadow: '2px 2px # 666',
FONTSIZE: '17px',
warna: '-linear-kecerunan (# fff, 0.2 = # fff, 0.5 = # fff, # fff)',
berlegar: textShadow: '2px 2px # 9d9d9d',
warna: '-linear-kecerunan (# d4d4d4, putih)

23 Disember 2009 pada 09:31

Terima kasih kerana sangat berguna "Fool-bukti" tutorial ini. Saya mempunyai pelanggan yang bertanya kepada saya beberapa soalan sekitar teknik penggantian teks, saya akan memberinya link anda supaya dia boleh membaca untuk dirinya sendiri.

Dengan cara ini saya berkongsi sentimen anda tentang WooThemes, saya mungkin berat sebelah kerana saya penguji beta untuk mereka

27 Julai 2010 pada 06:30

artikel bagus!
i digunakan cufon sempena PHP dan jQuery pada laman web agensi pelancongan baru-baru ini - kerja-kerja yang hebat!
i digunakan untuk gaya teks dinamik pada pemutar ciri dan istimewa dinamik di halaman rumah (shipsandtripstravel.com) dan digunakan beberapa fon pada halaman testimoni mereka (shipsandtripstravel.com/about/testimonials.html)

Jul 28, 2010 pada 11:28

@Gregg - iaitu satu laman web yang menarik. membuatkan saya ingin melakukan perjalanan

April 29, 2012 pada 14:54

Terima kasih banyak-banyak. Lucu saya dapati post anda kerana saya telah melakukan perkara yang sama anda lakukan ... fikir font yang terpaksa dibaca sebagai fail img sehingga saya menggunakan alat pemaju Google dan mendengar Cufon buat kali pertama. Bukankah lebih baik untuk menggunakan perpustakaan jQuery Google walaupun ??

// Anda boleh menentukan nombor versi separa ini, seperti "1" atau "1.3",
// dengan keputusan yang sama. Berbuat demikian secara automatik akan memuatkan
// sepadan versi terkini bahawa corak semakan separa
// (contohnya 1.3 akan memuatkan 1.3.2 hari ini dan 1 akan memuatkan 1.7.2).
google.load ( "jquery" "1.7.2");

google.setOnLoadCallback (function () // Letakkan kod init di sini dan bukannya $ (document) .ready ()
>);

Cheers dan menjaga kandungan yang besar ini mengalir!

Steve
Kingston, ON Kanada

April 30, 2012 pada 09:50

tidak sesiapa yang mempunyai masalah dengan cufon? i "cufonized" font saya, adakah semua untuk membuat ia bekerja di laman web saya dan daripada ... font cufon yang mengubah segala-galanya. perkara-perkara yang tidak lagi di tempat yang tepat di sana? ia berlaku kepada sesiapa lagi?

5 Mei 2012 pada 07:16

apa cufin fon Therapy gunakan?

Menonton video ini!

Artikel berkaitan

generator sitemap terbaik joomla hostingCiri-ciri: - Menjana fail sitemap.xml online secara percuma - dapat memproses jumlah yang tidak terhad muka surat * - Memberikan Google sitemap / XML peta tapak validator - Laporan dipecahkan pautan - pelengkap, tanpa sebarang ...
Gameon FJT joomla hostingTerima kasih untuk maklumat Michaelson itu. Saya turun Firebug dan ia adalah sumber yang hebat! Saya dapat mengesan baris kod dalam fail css. Walau bagaimanapun, masalah baru telah muncul: template.css yang ...
Pdf menanamkan 15 joomla hostingJoomla 2.5 telah mencapai akhir hidup untuk 2014/12/31. Sila ambil perhatian ini boleh menjadi risiko keselamatan ke laman web anda. Anda boleh lihat lebih banyak maklumat mengenai akhir kehidupan di sini. Oleh kerana mereka ...
Menggunakan dua template dalam joomla hostingDalam Joomla 2.5 / 3, anda boleh menggunakan template lebih daripada satu reka bentuk di laman web anda. Ini bermakna bahawa anda boleh membuat laman web dengan kumpulan muka surat kecil, atau muka surat kecil individu yang mempunyai unik ...
Suapan xml penghurai joomla hostingApa itu XML Fail? The Extensible Markup Language, atau XML adalah salah satu daripada format terbuka yang paling biasa digunakan untuk menyimpan, penstrukturan, manipulasi dan pengangkutan data. Salah satu utama ...