ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Free Site => ข้อความที่เริ่มโดย: VadiForte ที่ 19 ธันวาคม 2012, 21:29:06



หัวข้อ: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: VadiForte ที่ 19 ธันวาคม 2012, 21:29:06
วันนี้มีวิธีเปลี่ยน Font บนเว็บไซต์ ที่หลายๆ คนอาจจะยังไม่รู้ (มั้ง) ซึ่งวิธีนั้นโคตรจะง่าย

แต่ผมมัวไปงมวิธียากๆ ตั้งนาน

วิธีง่ายๆ มากครับ แค่เพิ่ม โค๊ดนี้เข้าไปใน CSS

@font-face
     {
         font-family: DSN_Single;
         src: url(http://yourwebsite.com/DSNSIN.TTF);
     }

เปลี่ยน font-family: DSN_Single; เป็นอย่างอื่นตามใจฉันได้เลยครับ
ส่วน src: url(http://yourwebsite.com/DSNSIN.TTF); ก็ให้เลือกไปที่ไฟล์ Font ที่เราอัพไว้

ส่วนวิธีนำไปใช้นั้นก็แค่ เอา  font-family: DSN_Single; ไปใส่ไว้ในแท็ก CSS ที่ต้องการให้เปลี่ยนฟ้อนท์ครับ

ง่ายๆครับ จบข่าว

 :wanwan001:

นี่ตัวอย่างเว็บที่ผมเพิ่งเปลี่ยนไป http://store-th.com/ ในส่วนของ Title
ซึ่ง Tiltie เว็บผมใช้ h2 ผมก็จัดการเอา  font-family: DSN_Single; ไปต่อที่ h2 ใน CSS ครับ

ง่ายไหมครับพี่น้อง


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: Zhelf ที่ 19 ธันวาคม 2012, 21:42:36
ขอบคุณครับผม จะลองเอาไปใส่เว็บดู :wanwan017:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: Phromphat ที่ 19 ธันวาคม 2012, 22:09:48
โอ้แจ่มมาก แล้วสามารถเปลี่ยนได้ทั้งเว็บเลยด้วยไหมครับ
 :wanwan017:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: cgdeaw ที่ 19 ธันวาคม 2012, 22:10:54
ขอบคุณครับ +1


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: Nopzixcros ที่ 19 ธันวาคม 2012, 22:11:30
ขอบคุณครับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: pakakal01 ที่ 19 ธันวาคม 2012, 22:56:53
ขอบคุณครับผม ง่าย แต่มีประโยชน์มาก


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: WPDSign ที่ 20 ธันวาคม 2012, 00:01:27
แค่คิดยังไม่เคยลอง
ขอบคุณครับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: Veeraphan ที่ 20 ธันวาคม 2012, 00:13:16
ขอบคุณสำหรับความรู้ครับ  :wanwan017:

แต่ขอติงนิดหน่อย  เรื่องคำว่า "พ่อทุกสถาบัน!!"  ถึงแม้ท่านเจ้าของกระทู้ไม่ได้สื่อความหมายไปในทางหยาบคายก็ตาม  หากเลี่ยงได้ก็อยากให้เลี่ยงไม่ใช้คำนี้ครับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: Jokerz ที่ 20 ธันวาคม 2012, 02:49:10
ขอบคุณคับ จะลองดู


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: somsak1 ที่ 20 ธันวาคม 2012, 04:29:30
เราสามารถเปลี่ยนฟ้อนท์ของบอร์ด SMF ได้ไหมครับ ใครทำได้ช่วยแนะนำหน่อย


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: mooyongster ที่ 20 ธันวาคม 2012, 04:42:47
ใช้ประจำ font สวยๆทั้งนั้น fontface


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: mymo ที่ 20 ธันวาคม 2012, 07:07:04
ขอบคุณครับ :wanwan003:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: dekmv ที่ 20 ธันวาคม 2012, 07:28:16
เสริมครับ

@font-face {
    font-family: 'AlfaSlabOne-Regular-OTF-webfont';
    src: url('../font/AlfaSlabOne-Regular-OTF-webfont.eot');
    src: url('../font/AlfaSlabOne-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/AlfaSlabOne-Regular-OTF-webfont.woff') format('woff'),
         url('../font/AlfaSlabOne-Regular-OTF-webfont.ttf') format('truetype'),
         url('../font/AlfaSlabOne-Regular-OTF-webfont.svg#AlfaSlabOne-Regular-OTF-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

รองรับหลาย Browser ครับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: atzcret ที่ 20 ธันวาคม 2012, 08:35:04
เยี่ยม !!


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: yuseki ที่ 20 ธันวาคม 2012, 08:42:18
โอ้!!เยี่ยมมาก ขอบคุณมากค่าาา :wanwan017:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: Pink.in.th ที่ 20 ธันวาคม 2012, 10:07:46
ขอบคุณมาก ๆ ครับ เคยใช้อยู่เหมือนกันครับ  :wanwan019:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: xaax ที่ 20 ธันวาคม 2012, 10:41:57
แจ่มเลยครับ เดี๋ยวลองเอาไปใช้ดู  :wanwan017:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: holidaytours ที่ 20 ธันวาคม 2012, 10:47:49
สุดยอดมากคับ
 :wanwan017:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: Yuu_jung ที่ 20 ธันวาคม 2012, 10:53:46
ขอบคุณมากคร่า


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: icokezaa ที่ 20 ธันวาคม 2012, 11:55:42
แจ่ม เลยครับ ขอบคุณมากครับ  :wanwan019:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: flash ที่ 20 ธันวาคม 2012, 12:06:35
ขอบคุณครับ ต้องลอง


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: Phromphat ที่ 20 ธันวาคม 2012, 16:00:48
สอบถามหน่อยครับ มีผลเสียต่อ SEO Onpage ไหมครับ
เช่นโหลดช้าขึ้น บลาๆ  :wanwan044:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: polyoko ที่ 20 ธันวาคม 2012, 16:07:14
ขอบคุณมากครับ
ชอบหัวข้อมากครับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: HaChi ที่ 20 ธันวาคม 2012, 16:57:10
เก็บเข้าคลัง  ขอบคุณครับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: maxjame5432 ที่ 29 ธันวาคม 2012, 22:08:32
ความรู้ๆๆๆๆๆ

ขอบคุณครับ เดียวจะลองเอาไปใช้กับ Blogspot ^^

 :wanwan003: :wanwan003:


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: rukrean ที่ 29 ธันวาคม 2012, 23:37:07
เป็นความรู้ที่ดีครับ ในกรณีดังกล่าวมันค่อนข้างง่ายนะครับ ถ้าเกิด theme ที่เราใช้นั้นได้ใส่ font-face ไว้แล้วให้กับ h ทั้งหลาย
หรือส่วนอื่นๆ เราแค่เปลี่ยนดังที่เจ้าของกระทู้ได้บอกไว้ ก็เรียบร้อยครับ เปลี่ยน url อย่างเดียวก็จบแล้วครับ อย่างอื่นไม่ต้อง
แต่ถ้ายัง ให้ทำไปมันก็เท่านั้นนะครับ มันไม่แสดงผลออกมาหรอกนะครับ ดังนั้นเราอาจจะทำดังนี้ครับ
เพิ่มส่วนนี้เข้าไป ต่อจาก @font-face
h1,h2,h3,h4,h5,h6 {
   font-family: DSN_Single;
}

ปล.
1. ดูด้านข้าง (sidebar) จากเว็บของเจ้าของกระทู้ยังเป็น font ธรรมดาอยู่เลยครับ
2. ใช้ font อะไรดูด้วยว่าเค้าอนุญาตหรือเปล่าหรือปัญหาจะตามมาครับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: storyman ที่ 30 ธันวาคม 2012, 02:33:33
ขอบคุณมากเลยคับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: 4Aoy ที่ 30 ธันวาคม 2012, 10:30:32


หัวข้อกระทู้ ได้ใจมาก " @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ"  :wanwan004:

ขอบคุณน้ำใจครับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: sriracha ที่ 30 ธันวาคม 2012, 10:39:48
สะสมไว้เป็น ความรู้ และ แนวทางครับ + :'(


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: 50115422 ที่ 18 มกราคม 2013, 17:05:12
ว้าว ขอบคุณครับ


หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!
เริ่มหัวข้อโดย: NightClub ที่ 18 มกราคม 2013, 17:07:15
ได้แต่พวกบราวเซอร์ที่รองรับ css3 หรือเปล่าครับ



หัวข้อ: Re: @font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ
เริ่มหัวข้อโดย: sasipim ที่ 18 มกราคม 2013, 17:12:19
เสริมครับ

@font-face {
    font-family: 'AlfaSlabOne-Regular-OTF-webfont';
    src: url('../font/AlfaSlabOne-Regular-OTF-webfont.eot');
    src: url('../font/AlfaSlabOne-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/AlfaSlabOne-Regular-OTF-webfont.woff') format('woff'),
         url('../font/AlfaSlabOne-Regular-OTF-webfont.ttf') format('truetype'),
         url('../font/AlfaSlabOne-Regular-OTF-webfont.svg#AlfaSlabOne-Regular-OTF-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}



ใช้อันนี้อยู่ แต่มีปัญหากับ IE เก่าๆ ไม่ยอมเปลี่ยน

http://www.font2web.com/

ใช้แปลง Font ทั้งชุด ลองดูค่ะ