แนบฟอนต์บนเวบ
มีวิธีการแนบฟอนต์อยู่หลายวิธี
ttfgen - อันนี้จะทำออกมาเป็นรูปภาพเลย
แน่นอนข้อเสียคือช้า
siFR - เอา Flash มาแสดง font
(ซึ่งเราจะแนบฟอนต์ลงไปใน flash), แต่ช้า ไม่นิยมแล้ว
@font-face ผ่าน CSS3
วิธีนี้ไฟล์ฟอนต์จะมีนามสกุลเป็น EOT ดูได้กับ browser บางรุ่น
Google Font API -
ของใหม่ล่าสุด เพิ่งออกเมื่อกลาปีลองดู ตัวอย่าง
cufont และ
Typeface.js
สองอันนี้ใช้วิธีแปลง font เป็น SVG แล้วใช้ JavaScript วาดเอา ไม่ต้องใช้
Flash เร็วกว่า และดูผ่าน Browser ได้มากรุ่นกว่า
ทั้งสองตัวทำงานคล้ายกัน คือจะมี 2 ส่วนคือ 1. ตัวแปลงฟอนต์
2.javascript
ดังนั้นตอนนี้ วิธีการแนบฟอนต์ที่น่าสนใจมีดังนี้ Google Font API,
cufont และ
Typeface.js
เราจะมาลองกันทั้ง 3 อันเลย
cufont
ก่อนอื่นต้องแปลงไฟล์ก่อน โดยใช้ Generator เช่นจะใช้ font radio stars.ttf ก็จะได้ไฟล์
Radio_Stars_400.font.js กลับมา
จากนั้นโหลด cufon-yui.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Radio_Stars_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This is radio stars.ttf font!</h1>
</body>
</html>
Typeface.js
คราวนี้จะลอง font ภาษาไทยบ้าง ผมเลือกฟอนต์ "กุลสตรี" วิธีการใช้งาน เหมือน cufon เลย เริ่มจากโหลดไฟล์ library (typeface-0.14.js) มาก่อน แล้วไป convert ไฟล์ Kunlasatri.ttf ก็จะได้ kunlasatri_regular.typeface.js
การใช้งาน
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script src="typeface-0.14.js"></script>
<script src="kunlasatri_regular.typeface.js"></script>
<body>
<div class="typeface-js" style="font-family: kunlasatri; font-size: 200px">
กุลสตรีไทย
</div>
</body>
</html>
Google Font API
รู้สึกผิดหวัง เนื่องจาก ยังเป็น beta labs อยู่ ตอนนี้ยังไม่สามารถ upload font ของเราเองขึ้นไปได้ ดังนั้นตอนนี้จึงสามารถเลือกใช้เท่าที่ google ให้มา ลองดูได้จากที่หน้า preview
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("webfont", "1");
google.setOnLoadCallback(function() {
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}});
});
</script>
<style type="text/css">
.wf-inactive p {
font-family: serif
}
.wf-active p {
font-family: 'Tangerine', serif
}
.wf-inactive h1 {
font-family: serif;
font-size: 32px
}
.wf-active h1 {
font-family: 'Cantarell', serif;
font-size: 32px
}
</style>
<body>
<h1>This is using Cantarell</h1>
<p>This is using Tangerine!</p>
typeface.js แสดงภาษาไทยแล้วมีปัญหา เมื่อทดสอบกับ cofon พบว่าสามารถใช้ภาษาไทยเป็นอย่างดี
cufon:
typeface.js
สรุป ขณะนี้ cufon น่าสนใจที่สุด
ความเห็น (1)
เยี่ยมมากครับ ... มีลอง ๆ ;)
ขอบคุณครับสำหรับการแบ่งปันความรู้