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

ตอบกระทู้


คำถามนี้ เพื่อป้องกันการส่งแบบอัตโนมัติจากสแปมบอท
รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[flash] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: โหลดฟ้อนเจ๋ง ๆ จาก google fonts มาใช้ในเว็บของเรากัน

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

โพสต์ โดย jamepiyawat » 27/06/2019 12:13 pm

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

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

Selection_777.png
Selection_777.png (32.6 KiB) เปิดดู 303 ครั้ง


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

Selection_778.png
Selection_778.png (42.01 KiB) เปิดดู 303 ครั้ง


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

Selection_779.png
Selection_779.png (54.39 KiB) เปิดดู 303 ครั้ง


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

Selection_780.png
Selection_780.png (46.75 KiB) เปิดดู 303 ครั้ง


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

Selection_781.png
Selection_781.png (43.14 KiB) เปิดดู 303 ครั้ง


โค้ดนี้ก็จะเป็นตัวอย่างในการเรียกใช้งานฟ้อนจาก 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
Selection_782.png (24.27 KiB) เปิดดู 303 ครั้ง



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

ข้างบน