TIP : CSS3 การเรียกใช้งาน font ด้วย @font-face เเละ @import url

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 21657
Joined: 31/03/2014 10:02 am
Contact:

TIP : CSS3 การเรียกใช้งาน font ด้วย @font-face เเละ @import url

Post by thatsawan » 18/05/2015 1:22 am

TIP : CSS3 การเรียกใช้งาน font ด้วย @font-face เเละ @import url
วิธีแรก : เป็นการดาวน์โหลดฟอน์ต ต่างๆ เข้ามาเก็บไว้ที่เว็บไซต์ ของเราเอง เเล้วใช้การ @font-face เรียก path font ขั้นมาใช้งาน ทำได้ดังตัวอย่างค่ะ
2015-05-18_0-07-51.jpg
2015-05-18_0-07-51.jpg (76.85 KiB) Viewed 2173 times
อธิบายเพิ่มเติม :
จะสังเกตุเห็นว่า font ชื่อเดียวกันเเต่ทำไมถึงมี นามสกุลที่เเตกต่างกัน เหตุนี้ก็เพราะ เเต่ละ Browser จะรองรับ font file ที่เเตกต่างกัน ทั้งนี้ที่เราต้องมีหลากหลายก็เพื่อต้องการให้เว็บไซต์ของเราสามารถเปิดใช้งาน font ได้
2015-05-18_0-43-45.jpg

Code: Select all

@font-face {
	font-family: 'TH Sarabun';
	src: url('thsarabunnew-webfont.eot');
	src: url('thsarabunnew-webfont.eot?#iefix') format('embedded-opentype'),
		url('thsarabunnew-webfont.woff') format('woff'),
		url('thsarabunnew-webfont.ttf') format('truetype');
}
อธิบายเพิ่มเติม :
font-family: คือ ระบุชื่อ font ที่เราจะใช้งาน
src: url : เป็นการระบุ path ของไฟล์ที่เราทำการเก็บไว้
format : เป็นการระบุ รูปแบบของ font file ของเรา เพื่อให้รองรับกับ Browser ต่างๆ
2015-05-18_0-43-11.jpg
2015-05-18_0-43-11.jpg (186.85 KiB) Viewed 2173 times

Code: Select all

@import url("../webfonts/TH_Sarabun/stylesheet.css");
body{
	font:0.875em/1.4 "TH Sarabun", Helvetica, sans-serif;
	background:#77aaaa;
}
คำอธิบายเพิ่มเติม :
@import url : คล้ายๆ กับคำสั่ง include เป็นการเรียกไฟล์ stylesheet.css มาใช้งาน
font:0.875em/1.4 "TH Sarabun", Helvetica, sans-serif;
2015-05-18_0-39-27.jpg
2015-05-18_0-40-18.jpg
2015-05-18_0-40-18.jpg (145.87 KiB) Viewed 2173 times
2015-05-18_0-40-59.jpg
2015-05-18_0-40-59.jpg (210.43 KiB) Viewed 2173 times
วิธีที่สอง [/size]ในการเรียกใช้งาน font วิธีนี้เราไม่จำเป็นต้องทำการโหลด font เก็บไว้ ด้วยความสามารถของ @font-face ทำให้เราสามารถ ระบุ path ของ font file ยังเว็บไซต์ต่างๆได้เลย

วิธีที่สาม import url มาเลย ตัวอย่างเราจะทำการเลือกใช้งานของ
2015-05-18_1-06-51.jpg
2015-05-18_1-06-51.jpg (5.85 KiB) Viewed 2173 times

Code: Select all

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
ถ้าเราลองคลิกเข้าไปดูตาม path URL เราจะให้
ตัวอย่างการใช้งานง่ายมากๆค่ะ
https://www.google.com/fonts/ เข้าไปเลือก font ที่เราต้องการ
2015-05-18_1-11-08.jpg
2015-05-18_1-11-08.jpg (81.72 KiB) Viewed 2173 times
คลิกไปที import จากนั้นเราก็ copy มาวางที่ไฟล์เราได้เลยค่ะ

Code: Select all

@import url(http://fonts.googleapis.com/css?family=Roboto);
#cssmenu {
  font-family: Roboto, sans-serif;
  background: #333333;
}
วิธีที่สี่: ใส่ link HTML เลย วิธีนี้จะคล้ายกับวิธี สามค่ะ

Code: Select all

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
#cssmenu {
  font-family: Roboto, sans-serif;
  background: #333333;
}
นอกจากนี้ การเรียกใช้งานยัง มี javascrip อีกด้วยค่ะ


ข้อความระวังในการใช้งาน font เรื่องลิขสิทธิ์
Last edited by thatsawan on 24/05/2015 10:36 pm, edited 2 times in total.

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests