การออกแบบเว็บไซต์ในปัจจุบันมีความหลากหลายมาก ทั้งในส่วนของดีไซน์ การจัดวางเลย์เอาต์ การให้สี การใช้ภาพประกอบ การใช้ฟ้อนท์ที่หลากหลาย
ส่วนอื่นๆ อาจไม่มีปัญหามากนัก ในแง่ของการนำไปใช้จริงบนเว็บไซต์ ยกเว้นในส่วนของการใช้ฟ้อนท์ที่หลากหลาย
เป็นที่ทราบว่าบนอินเทอร์เนตนั้น หากขึนไปใช้ฟ้อนท์แปลกๆ นอกจาก Tahoma หรือ Ms sans-serif อาจทำให้การแสดงผลเป็นภาษาต่างดาวแทน อาจมีการใช้ฟ้อนท์แปลกๆ เฉพาะหัวข้อใหญ่ หรือโลโก้ โดยเลี่ยงไปใช้เป็นภาพแทนตัวหนังสือ วันนี้ขอเสนอการแก้ปัญหาเรื่อง font บนเว็บด้วย Cufon
Cufon สามารถบันดาลให้เว็บไซต์ของคุณมี font แปลกๆ ตามใจคุณได้ แต่ขอแนะนำว่า ให้ใช้เฉพาะฟ้อนท์แปลกๆที่หัวข้อที่สำคัญๆเท่านั้น หากใช้ทั้งเว็บ อาจส่งผลให้เว็บคุณช้าได้ เพราะ Cufón จะแปลงตัวหนังสือของคุณให้เป็นไฟล์ภาพ .png
วิธีทำ มีเพียง 4 ขั้นตอนง่า่ยๆ เท่านั้น ดังนี้
1. ดาวน์โหลดไฟล์ Cufon.yui.js
2. เอาฟ้อนท์ที่คุณอยากใช้ไปแปลงก่อน ที่ http://cufon.shoqolate.com/generate/ จะได้ไฟล์ .js มาตัวหนึ่ง
3. เรียกใช้ไฟล์ .js ทั้ง 2 ตัวมายังเพจที่จะใช้งาน
4. ระบุ elements ที่ต้องการใช้ฟ้อนท์แปลก ตามตัวอย่างด้านล่าง
ส่วน head
<script src="script/cufon-yui.js" type="text/javascript"></script> <script src="script/penthai_900-penthai_700-penthai_italic_900-penthai_italic_700.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1,h2'); </script> <style type="text/css"> h1 { font-size:60px; color: #2A2A2A ; text-align:center} h1 span { color: #A0A0A4} h2 { font-size:42px; text-align:center; } </style> |
ส่วน body
<h1>คำสั่ง <span>WordPress</span> เบื้องต้น</h1> <h2>บทที่ 1 sidebar</h2> |
ตามตัวอย่าง เมื่อไรก็ตามที่เราเรียกใช้คำสั่ง h1 และ h2 มันจะเปลี่ยนเป็นฟ้อนท์ที่เราต้องการทันที และหากใช้คำสั่ง span ใน h1 จะมีสีตามที่เราระบุไว้ ดั่งตัวอย่าง
ที่มา : http://wiki.github.com/sorccu/cufon/usage
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
เจ๋ง says:
25/05/2553 at 25/05/2553
มีปัญหาตอนแสดง ภาษาไทยครับ..ไม่ทราบว่าแก้ปัญหาได้ยัง
nevikup says:
25/05/2553 at 25/05/2553
มีปัญหายังไงครับ
ผมใช้ก็ปกติดีนะ
ใช้ที่ เว็บนี้
http://select2w.freevar.com/
CheapCamera says:
18/08/2553 at 18/08/2553
โอ้ พระเจ้าทรงโปรด ขอบพระคุณมากเลยครับ ทุกวันนี้ผมเขียนโค้ด text to image เอา อย่างนี้ทุ่นแรงได้อีก
ขอบคุณมากเลยครับ
ijunnn says:
16/09/2553 at 16/09/2553
WOW!!!! ต้องลอง :)
koii says:
06/10/2553 at 06/10/2553
ไม่แสดงผลภาษาไทย จริงๆด้วยค่ะ ใครใช้ได้ช่วยบอกทีค่ะ
administrator says:
07/10/2553 at 07/10/2553
ผมใช้ได้ปกตินี่ครับ บนเว็บไซต์นี้ก็ใช้อยู่ ตรงหน้าแรกที่เขียนทักทายน่ะ
sak says:
14/10/2553 at 14/10/2553
หาเรื่องการฟังฟ้อนมาเป็นปี เจอหลายวิธีจะทำไม่สำเร็จสักที คิดและหวังว่าวิธีนี้จะสำเร็จนะครับ ขอบคุณมาก ๆ เลยครับ
nookoi says:
28/10/2553 at 28/10/2553
ลองทำตามที่บอกแล้ว รูปแบบ font ไม่เปลี่ยนไป
ยังคงเป็น font ธรรมดา
ไมทราบว่าสาเหตุที่ไม่ได้เกิดจากอะไรได้บ้างค่ะ
หากไม่เปงการรบกวนมากนัก อยากได้ โค๊ดตัวอย่างเป็น .rar ทั้งหมดเลย มาลองเทสที่เครื่องหน่ะค่ะ ขอบคุณพี่ๆ ล่วงหน้านะค่ะ
mrsitti says:
22/02/2554 at 22/02/2554
ลองทำตามนี้นะครับ
1. ดาวน์โหลดฟอน์นที่สามารถ Gen แล้วแสดงภาษาไทยได้จากเว็บ http://www.f0nt.com ตามลิงค์นี้ครับ http://www.f0nt.com/release/13-free-fonts-from-sipa/ งามถูกใจ
** PSL JS อะไรเทือกนี้ ผม Gen แล้วใช้ได้บ้างไม่ได้บ้าง แต่ถ้าดาวน์โหลดจากเว็บ f0nt ใช้ได้หมดทั้งภาษาไทยและอังกฤษครับ
2. Download file jquery-1.3.2.js
(http://jqueryjs.googlecode.com/files/jquery-1.3.2.js)
3. ทำตามที่ป๋าแกแนะนำไว้ข้างบนครับ คือเอา Font ที่ชอบไป Gen ให้เป็น .js (ซึ่งผม Gen แล้วได้ไฟล์ชื่อ TH_Niramit_AS_400.font.js)
สรุปเราต้องใช้ 3 ไฟล์ ครับ คือ jquery-1.3.2.js , cufon-yui.js , TH_Niramit_AS_400.font.js
4. สคริ๊ปตามนี้ครับ
**********************************************
Cufon.replace(‘.myClass,h1’);
Cufon.replace(‘.myClass,h1’, { fontFamily: ‘TH_Niramit_AS_400’ });
h1 { font-size:60px; color: #2A2A2A }
p { font-size:12pt}
.myClass{font-size:18pt}
ต่อตั้งให้ใช้ @#$%!~*/ การณ์
ต่อตั้งให้ใช้ @#$%!~*/ การณ์ Test Font
ต่อตั้งให้ใช้ @#$%!~*/ สุขทุกข์การณ์ Test Font
ต่อตั้งให้ใช้ @#$%!~*/ สุขทุกข์การณ์ Test Font
**********************************************
เท่าที่ใช้มานานนูนนู้นนี่ยังไม่มีปัญหานะครับพี่น้อง และถ้าใครมีอะไรดีๆ ก็เอามา แบ่งกันบ้างเน้อ…
mrsitti says:
22/02/2554 at 22/02/2554
โหลดเพลง says:
22/02/2554 at 22/02/2554
เอาไปใช้ในเว็บบ้างดีกว่า ~~
อนุสรณ์ says:
03/12/2554 at 03/12/2554
ผมทำไม่ได้อ่ะครับ
ทำยังไงครับช่วยบอกผมที
ผมใช้ wp อ่ะครับ
พอทำตามวีธีที่พี่ ๆ บอก
ผมได้โค้ดแบบนี้
Cufon.replace(‘.myClass,h1’);
Cufon.replace(‘.myClass,h1’, { fontFamily: ‘TH_Niramit_AS_400’ });
h1 {
font-size:60px;
color: #2A2A2A
}
p {
font-size:12pt
}
.myClass {
font-size:18pt
}
ผมก็เอาไปแปะที่ Template หน้าหลัก (index.php)
และ loop-post-formats.php
แล้วก็อัพไฟล์ สองอันนั้น ขึ้นโฮส
ตอนแลกผมใว้ใน js ที่ wp มีให้ แต่ไม่ได้
ผมเลยย้ายมาอยู่ที่เดียวกับ index
วานผู้รู้ช่วยสอนหน่อยคร๊าบ….
พึ่งหัดทำเว็บครับ
ขอบคุณครับ
อนุสรณ์ says:
03/12/2554 at 03/12/2554
Cufon.replace('.myClass,h1');
Cufon.replace('.myClass,h1', { fontFamily: 'TH_Niramit_AS_400' });
h1 {
font-size:60px;
color: #2A2A2A
}
p {
font-size:12pt
}
.myClass {
font-size:18pt
}