ผมคิดว่าท่านๆเคยพยายามที่จะเปลี่ยนfontในหน้าเว็บกัน เหมือนผมใช่ไหมละครับ แต่การเปลี่ยน fontในหน้าเว็บนั้นจะไม่ง่ายเหมือนกัน word หรือ photoshop ที่แค่เลือกfontแล้วเปลี่ยนได้สบายตามใจฉัน และวิธีการเปลี่ยนfontนั่นก็มีอยู่หลายวิธีด้วยกัน(ถ้าใครที่เสิร์จหาเจอแล้วลองทำดูแล้วก็น่าจะรู้ครับ)ไม่ว่าจะเป็นการเปลี่ยนโดยใช้ php สร้างเป็นรูปภาพมาแปะเพื่อที่จะให้มัน cross Browser หรือว่าจะใช้เป็น ใส่ Flash มาทับพื้นที่ที่ต้องการใช้ตัวอักษรนั้นอย่าง sIFR ที่เห็นกันในเว็บ ไทยรัฐ แต่สำหรับบทความผมจะขอแนะนำการใช้ @font-face ใน css stylesheet กัน เพราะคิดว่าเป็นวิธีที่สะดวกและง่ายที่สุดครับ
สำหรับ @font-face นี้จะ support Browser IE4 ขึ้นไปนะครับ(เขาว่างั้นนะครับ ผมได้ลองแค่ ie6) ส่วน browser modernอื่นๆคงไม่ต้องพูดถึงครับหาก ie support แล้ว ฮ่าๆๆ
วิธีการใช้ @font-face แบบ cross browser
สิ่งที่ต้องเตรียมมาก็คือ ไฟล์ font ที่เป็น .tff (truetype) ครับหาได้ทั่วไป มีให้โหลดเยอะแยะแถวๆ dafont.com และก็ notepad++ สักตัว(ไม่พลัสหรือตัวอื่นก็ได้ครับ แต่ผมชอบตัวนี้ ฮ่าๆ)
เสร็จแล้วก็ให้เข้าเว็บ http://www.kirsle.net/wizards/ttf2eot.cgi ตามนี้ครับ เพื่อที่จะแปลง .tff เป็น .eot ให้ IE support ด้วย (จริงๆเว็บอื่นก็มีครับลอง search google : ttf2eot หรือว่า ttf to eot )
เสร็จแล้วก็ เลือกไฟล์ font .ttf ของเรา แล้วคลิ๊ก Convert TTF To EOT! ครับ
เมื่ออัพโหลดเสร็จแล้ว web มันจะ generate css มาให้พร้อมกับลิ้งค์โหลดไฟล์ .eot ก็โหลดไฟล์ .eot นั้นมาใส่ไว้ใน folder เดียวกับไฟล์ stylesheet ครับ แล้วก็ก๊อปโค๊ดไปไว้ในหน้าเพจหรือว่าตัดเอามาใส่ใน stylesheet บรรทัดแรกๆก็ได้ครับ
คราวนี้ท่านอยากใช้ font นี้ตรงส่วนไหนก็สามารถเขียน css จับใส่ลงไปใน font-family ได้อย่างสบายใจละครับ
ตัวอย่าง stylesheet
@font-face {
font-family: Test;
src: url(Test.eot);
}
@font-face {
font-family: Test;
src: url(Test.ttf) format('truetype');
}
h1,h2,h3,h4,h5,h6{
font-family:Test,tahoma,Arial,sans-serif;
}
สำหรับ Firefox จะมีปัญหาอยู่นึงกรณีนำไปใช้ หลายโดเมน หรือว่าหลาย subdomain ครับ firefox จะติดหลุม Security พวก Cross Site อ่าครับ ดูได้จากที่นี่ครับ https://developer.mozilla.org/en/HTTP_access_control
สำหรับวิธีแก้ปัญหาก็คือให้เพิ่ม header Access-Control-Allow-Origin: * ลงไปใน output ครับ(ค่อนข้างจะ low level นิดนึง -..-) วิธีที่ง่ายที่สุดเห็นจะเป็น เอาไปใส่ใน .htaccess ครับ โดยอนุญาตใ้ห้ทุกโดเมน สามารถเข้าถึงไฟล์ตัวนี้ได้ครับ
.htaccess
header set Access-Control-Allow-Origin *
สำหรับรายละเอียดลึกๆผมจะไม่ขออธิบายนะครับว่าจะทำยังไงให้ Allow เฉพาะไซต์หรือว่า Allow เว็บตามชื่อที่อยู่ใน list มันจะงงเปล่าๆ = =’ เอาแค่นี้ก็แล้วกันครับ
ขอบคุณครับ เฟี้ยวเงาะเช่นเคย
(ถ้าอายุจังก็ มั่วเริ่ดเช่นเคย ๕๕๕)
ฮ่าๆ เฟี้ยวเงาะ = =’
ว๊าวววว สวยจริงท่านเป็ด : )
ขอบคุณครับที่ชม ว่าแต่ขอเป็นหล่อได้ไหม ? เค้าเป็นผู้ชายนะเธอ ….
- -* 555
พอจะอธิบาย วิธีทำ Access-Control-Allow-Origin ได้ไหมครับ
ท้ายบทความอ่าครับ
สร้างไฟล์ .htaccess แล้วเอาไปใส่ไว้ใน folder ที่เก็บตัวfont
header set Access-Control-Allow-Origin *แต่ถ้าอยากให้ใช้ได้เฉพาะ Domain ก็ใส่ไปเป็น http://domain.com/
หรือถ้าใช้หลายโดเมน(แต่ไม่ทุกโดเมน)ก็ต้องเขียน php เอาครับเพราะ header ตัวนี้จะใส่ไปหลายตัว(โดยใช้ , ไม่ได้)
ต้องใช้ php เช็ค referer หรือว่า header Origin ครับ ($_SERVER['HTTP_ORIGIN']) อาจจะมีเป็น file เก็บ โดเมนที่ อนุญาติให้ใช้ได้แล้วเอาเทียบกับ $_SERVER['HTTP_ORIGIN'] เอาครับ
น่าจะประมาณนี้แหละครับ แต่ผมว่าง่ายสุดก็ใช้ .htaccess อย่างที่บอกไว้แหละครับ
คือให้สร้างfile type .htaccess หรอครับ แล้วให้ใน file เก้บcode header set Access-Control-Allow-Origin * ไว้ใช่ไหมครับ
ครับ เปิด notepad มาใส่
header set Access-Control-Allow-Origin *
แล้วเซฟเป็น .htaccess (ไม่ต้องมีชื่อไฟล์) file type: All type ครับ
error ไปเลยครับ -.- เอาไปใส่ใน hosting ไม่มีปฏิกิริยาครับ
ถ้าขึ้น error 500 internal server error แปลว่า host ไม่ได้เปิด mod headers ไว้ครับ หรือไม่ก็อาจจะเขียน .httaccess ผิดครับ
httpd.conf
LoadModule headers_module modules/mod_headers.soยังมีอีกวิธีครับเรียกผ่าน php
<?
### http://div.expertduck.com/?p=436 ###
$font = 'MyFont'; //ชื่อไฟล์ฟ้อนต์ไม่ต้องใส่นามสกุล
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
header('Access-Control-Allow-Origin:*');
if(strpos($ua,'msie')){
header('Content-type: font/eot');
$file = $font.'.eot';
}else{
header('Content-type: font/ttf');
$file = $font.'.ttf';
}
header('Content-length: '.filesize($file));
readfile($file);
exit;
?>
php ก็เอาไปใส่ใน folder เดียวกันกับ font นะครับ แก้ตรง $font = ‘MyFont’; เป็นชื่อ font ของคุณนะครับ(ต้องมีทั้ง .eot และ .ttf)
อันนี้ ตัด @font-face ตัวเดียวได้เลยครับ(ทั้ง ie และอื่นๆ)
@font-face {
font-family: MyFont;
src: url("http://test/fonts/myFont.php"); /* แก้เรียกไปที่ .php แทน */
}
ปล.ไม่รู้จะยุ่งยากเกินไปหรือเปล่า -*-
ปล2. แก้หลายครั้งมาก code php ไม่ติด -*-
เดี๋ยวพรุ่งนี้ผมจะลองดูครับ ขอบคุณมากเลยครับ
ขอบคุณครับ จะลองดูครับ
Pingback: การบังคับให้หน้าเว็บเราเป็น font ที่ต้องการนะครับ และ font thai สวยๆ | Space ของ นาย บ้าบอ
เป็นบทความที่ดีมาก ๆ ( เกิดมายังไม่เคยใช้ เด๋วต้องลงซะหน่อย )
พีค่ะ…..ถ้าเราจะเอาฟอนต์ของตัวเองงงงลงในwordpressจะต้องทำไงอ่าค่ะ….ช่วยทีค่ะ….ด่วนนนนนนค่ะ…ขอเบอติดต่อด้วยได้มั่ยอ่ะค่ะ….
-..-
หาไฟล์ style.css ใน folder theme ของ wordpress อ่าครับ (เช่น wp-content/themes/twentyten/style.css) เปิดขึ้นมาแล้ว ใส่ code
/* ใส่ต่อจาก Comment ของ wordpress ครับ แต่ละ theme จะไม่เหมือนกันแต่จะคล้ายๆกัน ลักษณะ จะอยู่แนวๆนี้ครับ */
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable — make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the “Asides” and “Gallery” categories, and has an optional one-column page template that removes the sidebar.
Author: the WordPress team
Version: 1.1
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
*/
ใส่ไปตรงนี้
@font-face ตามข้างบน (ชื่อไฟล์ font กับ ตำแหน่ง ในโค๊ดต้องตรงกันนะครับ อย่างเช่น ชื่อ font ของเราเป็น myFont.ttf ก็เปลี่ยนจาก Test.ttf เป็น myFont.ttf เลยครับ) ส่วนของ font-family ตั้งชื่อเป็นอะไรก็ได้ (แต่ให้เหมือนกันทั้ง ส่วนของ .ttf และ .eot นะครับ)
เสร็จแล้ว จะใช้ font ตรงส่วนไหนก็เอา ชื่อฟ้อนต์ของเราไปใส่เป็น font-family เหมือนในบทความเลยครับ
อีกวิธี ให้แยกเขียน stylesheet ครับ โดยสร้าง stylesheet มาใหม่ แล้ว link เข้ามาก่อนที่จะใช้ stylesheet หลักครับ เช่น
ชื่อไฟล์ : myfont.css
ข้างในก็ใส่ code css @font-face ของเรา ………
แล้วไปแก้ ไฟล์ header.php ใน folder theme ของ WordPress เช่นกันครับ
ให้ใส่ <link rel="stylesheet" type="text/css" href="/myfont.css” /> ก่อน stylesheet หลักครับ
<link rel="stylesheet" type="text/css" href="” /> ครับ
โค๊ด จะอยู่แนวๆนี้ครับ
HTML:
<link rel="stylesheet" type="text/css" href="< ?php bloginfo('template_url');?>/myfont.css” />
<link rel="stylesheet" type="text/css" href="< ?php bloginfo('stylesheet_url');?>" />
ในไฟล์ stylesheet หลัก( style.css ) อย่าลืมใส่ ชื่อฟ้อนต์ เราใน font-family ใน selector ที่จะใช้ด้วยนะครับ