โหลดฟ้อนเจ๋ง ๆ จาก google fonts มาใช้ในเว็บของเรากัน

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

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

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1103
Joined: 21/05/2019 10:45 am

โหลดฟ้อนเจ๋ง ๆ จาก google fonts มาใช้ในเว็บของเรากัน

Postby jamepiyawat » 27/06/2019 12:13 pm

ในการทำเว็บไซต์ให้สวยงานและไม่เหมือนใครก็จำเป็นจะต้องมีฟ้อนสวย ๆ มาใช้งานกันบ้างอะไรบ้างวันนี้เราก็มีวิธีการเรียกใช้ฟ้อนจาก google มาฝากกันอีกทั้ง google fonts นั้นมีหลากลายภาษาให้เราได้เลือกใช้กันหนึ่งในนั้นแน่นอนก็ต้องมีภาษาไทยด้วย

อันดับแรกให้เราค้นหาคำว่า google font แล้วก็เลือกผลการค้นหาอันดับแรกได้เลย

Selection_777.png
Selection_777.png (32.6 KiB) Viewed 325 times


เมือเราเข้ามาแล้วเราก็จะสามารถสามารเลือกฟ้อนที่มีอยู่มากมายได้แต่ถ้าเราต้องการที่ฟ้อนเป็นภาษาไทยด้วยก็ให้เลือกเป็นภาษาไทย

Selection_778.png
Selection_778.png (42.01 KiB) Viewed 325 times


เมือเราเลือกฟ้อนที่ถูกใจได้แล้วเราก็ทำการคลิกเครื่องหมาย + ได้เลย

Selection_779.png
Selection_779.png (54.39 KiB) Viewed 325 times


ซึ่งเราก็สามารถเลือกฟ้อนได้หลายตัวตามที่เราต้องการได้ถ้าเราเลือกฟ้อนพอแล้วก็ให้คลิกที่มุมขวาล่าง

Selection_780.png
Selection_780.png (46.75 KiB) Viewed 325 times


เมือคลิกเข้ามาแล้วเราก็จะเห็นโค้ดที่เราต้องนำไปใช้
1. นำฟ้อนนี้ไปใส่ตรง head ของเรา
2. นำไปใส่ที่ css ของเรา

Selection_781.png
Selection_781.png (43.14 KiB) Viewed 325 times


โค้ดนี้ก็จะเป็นตัวอย่างในการเรียกใช้งานฟ้อนจาก google fonts

หน้าเว็บของเรา

Code: Select all

<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

Code: Select all

.fonttest{
  font-family: 'Charm', cursive;
}


ผลลัพธที่ได้

Selection_782.png
Selection_782.png (24.27 KiB) Viewed 325 times



เป็นอย่างไรบ้างครับสำหรับการวิธีการเรียกใช้ font ใน google font ไม่อยากอย่าที่คิดใช้ไหมแถมยังทำให้เว็บไซต์ที่เราพัฒนาอยู่มีความเท่มีความเป็นตัวของตัวเองมากยิ่งขึ้นอีกด้วยหวังว่าจะเป็นบทความที่ผู้เข้ามาอ่านจะได้ประโยชน์ไปใช้งานกันไม่มากก็น้อยนะครับและทางผู้เขียนบทความนี้ก็หวังเป็นอย่างยิ่งว่าจะผู้ที่ได้รับความรู้นี้จะนำไปส่งต่อความรู้ให้กับผู้ที่สนใจเหมือนกับเราได้รับความรู้นี้ไปด้วย

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 14 guests