ในการทำ
เว็บไซต์ให้สวยงานและไม่เหมือนใครก็จำเป็นจะต้องมีฟ้อนสวย ๆ มาใช้งานกันบ้างอะไรบ้างวันนี้เราก็มีวิธีการเรียกใช้ฟ้อนจาก
google มาฝากกันอีกทั้ง
google fonts นั้นมีหลากลายภาษาให้เราได้เลือกใช้กันหนึ่งในนั้นแน่นอนก็ต้องมีภาษาไทยด้วย
อันดับแรกให้เราค้นหาคำว่า google font แล้วก็เลือกผลการค้นหาอันดับแรกได้เลย
- Selection_777.png (32.6 KiB) Viewed 1566 times
เมือเราเข้ามาแล้วเราก็จะสามารถสามารเลือกฟ้อนที่มีอยู่มากมายได้แต่ถ้าเราต้องการที่ฟ้อนเป็นภาษาไทยด้วยก็ให้เลือกเป็นภาษาไทย
- Selection_778.png (42.01 KiB) Viewed 1566 times
เมือเราเลือกฟ้อนที่ถูกใจได้แล้วเราก็ทำการคลิกเครื่องหมาย + ได้เลย
- Selection_779.png (54.39 KiB) Viewed 1566 times
ซึ่งเราก็สามารถเลือกฟ้อนได้หลายตัวตามที่เราต้องการได้ถ้าเราเลือกฟ้อนพอแล้วก็ให้คลิกที่มุมขวาล่าง
- Selection_780.png (46.75 KiB) Viewed 1566 times
เมือคลิกเข้ามาแล้วเราก็จะเห็นโค้ดที่เราต้องนำไปใช้
1. นำฟ้อนนี้ไปใส่ตรง head ของเรา
2. นำไปใส่ที่ css ของเรา
- Selection_781.png (43.14 KiB) Viewed 1566 times
โค้ดนี้ก็จะเป็นตัวอย่างในการเรียกใช้งานฟ้อนจาก google fonts
หน้าเว็บของเรา
โค้ด: เลือกทั้งหมด
<link rel="stylesheet" href="../test/css.css">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Charm&display=swap" rel="stylesheet">
</head>
<body>
<h1>เครื่องมือและอุปกรณ์ทั้งหมดของพวกเขาพร้อมสำหรับการใช้งานแล้ว </h1>
<h1 class="fonttest">เครื่องมือและอุปกรณ์ทั้งหมดของพวกเขาพร้อมสำหรับการใช้งานแล้ว </h1>
</body>
</html>
หน้า css
โค้ด: เลือกทั้งหมด
.fonttest{
font-family: 'Charm', cursive;
}
ผลลัพธที่ได้
- Selection_782.png (24.27 KiB) Viewed 1566 times
เป็นอย่างไรบ้างครับสำหรับการวิธีการเรียกใช้ font ใน google font ไม่อยากอย่าที่คิดใช้ไหมแถมยังทำให้เว็บไซต์ที่เราพัฒนาอยู่มีความเท่มีความเป็นตัวของตัวเองมากยิ่งขึ้นอีกด้วยหวังว่าจะเป็นบทความที่ผู้เข้ามาอ่านจะได้ประโยชน์ไปใช้งานกันไม่มากก็น้อยนะครับและทางผู้เขียนบทความนี้ก็หวังเป็นอย่างยิ่งว่าจะผู้ที่ได้รับความรู้นี้จะนำไปส่งต่อความรู้ให้กับผู้ที่สนใจเหมือนกับเราได้รับความรู้นี้ไปด้วย
ในการทำ[url=https://mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3585-website-%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C.html]เว็บไซต์[/url]ให้สวยงานและไม่เหมือนใครก็จำเป็นจะต้องมีฟ้อนสวย ๆ มาใช้งานกันบ้างอะไรบ้างวันนี้เราก็มีวิธีการเรียกใช้ฟ้อนจาก [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/33-google/3783-google-%E0%B8%81%E0%B8%B9%E0%B9%80%E0%B8%81%E0%B8%B4%E0%B8%A5.html]google[/url] มาฝากกันอีกทั้ง [url=https://mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/33-google/4830-google-fonts.html]google fonts[/url] นั้นมีหลากลายภาษาให้เราได้เลือกใช้กันหนึ่งในนั้นแน่นอนก็ต้องมีภาษาไทยด้วย
อันดับแรกให้เราค้นหาคำว่า google font แล้วก็เลือกผลการค้นหาอันดับแรกได้เลย
[attachment=5]Selection_777.png[/attachment]
เมือเราเข้ามาแล้วเราก็จะสามารถสามารเลือกฟ้อนที่มีอยู่มากมายได้แต่ถ้าเราต้องการที่ฟ้อนเป็นภาษาไทยด้วยก็ให้เลือกเป็นภาษาไทย
[attachment=4]Selection_778.png[/attachment]
เมือเราเลือกฟ้อนที่ถูกใจได้แล้วเราก็ทำการคลิกเครื่องหมาย + ได้เลย
[attachment=3]Selection_779.png[/attachment]
ซึ่งเราก็สามารถเลือกฟ้อนได้หลายตัวตามที่เราต้องการได้ถ้าเราเลือกฟ้อนพอแล้วก็ให้คลิกที่มุมขวาล่าง
[attachment=2]Selection_780.png[/attachment]
เมือคลิกเข้ามาแล้วเราก็จะเห็นโค้ดที่เราต้องนำไปใช้
1. นำฟ้อนนี้ไปใส่ตรง head ของเรา
2. นำไปใส่ที่ css ของเรา
[attachment=1]Selection_781.png[/attachment]
โค้ดนี้ก็จะเป็นตัวอย่างในการเรียกใช้งานฟ้อนจาก google fonts
หน้าเว็บของเรา
[code]<link rel="stylesheet" href="../test/css.css">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Charm&display=swap" rel="stylesheet">
</head>
<body>
<h1>เครื่องมือและอุปกรณ์ทั้งหมดของพวกเขาพร้อมสำหรับการใช้งานแล้ว </h1>
<h1 class="fonttest">เครื่องมือและอุปกรณ์ทั้งหมดของพวกเขาพร้อมสำหรับการใช้งานแล้ว </h1>
</body>
</html>[/code]
หน้า css
[code].fonttest{
font-family: 'Charm', cursive;
}
[/code]
ผลลัพธที่ได้
[attachment=0]Selection_782.png[/attachment]
เป็นอย่างไรบ้างครับสำหรับการวิธีการเรียกใช้ font ใน google font ไม่อยากอย่าที่คิดใช้ไหมแถมยังทำให้เว็บไซต์ที่เราพัฒนาอยู่มีความเท่มีความเป็นตัวของตัวเองมากยิ่งขึ้นอีกด้วยหวังว่าจะเป็นบทความที่ผู้เข้ามาอ่านจะได้ประโยชน์ไปใช้งานกันไม่มากก็น้อยนะครับและทางผู้เขียนบทความนี้ก็หวังเป็นอย่างยิ่งว่าจะผู้ที่ได้รับความรู้นี้จะนำไปส่งต่อความรู้ให้กับผู้ที่สนใจเหมือนกับเราได้รับความรู้นี้ไปด้วย