ทำฟอนต์ให้สวยด้วย @font-face [css]

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

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

User avatar
tiamkeaw
PHP Sr. Member
PHP Sr. Member
Posts: 81
Joined: 01/01/1970 7:00 am

ทำฟอนต์ให้สวยด้วย @font-face [css]

Post by tiamkeaw »

1. เลือกฟอนต์ที่เราต้องการ ในบทความนี้ใช้ฟอนต์ชื่อ TP Tankhun
2. เข้าเว็บ http://www.fontsquirrel.com/fontface/generator เพื่อสร้างไฟล์ฟอนต์และ css
font-face-css-1.jpg
font-face-css-1.jpg (34.4 KiB) Viewed 3061 times
font-face-css-2.jpg
font-face-css-2.jpg (21.17 KiB) Viewed 3061 times
font-face-css-3.jpg
font-face-css-3.jpg (28.28 KiB) Viewed 3061 times
3. แตกไฟล์ที่โหลดมาแล้วย้ายไปไว้ที css
font-face-css-4.jpg
font-face-css-4.jpg (47.98 KiB) Viewed 3061 times
4. สร้างไฟล์ index.php และ link ไฟล์ stylesheet.css

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>ตัวหนังสือแบบสวยงาม</title>
        <link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen" />
    </head>
    <body>
        <h1>ตัวหนังสือแบบสวยงาม</h1>
        <p>ขอบคุณฟ้อนต์แทนคุณ</p>
    </body>
</html>
5. แก้ไข url ฟอนต์ให้ถูกต้องด้วยนะครับ และเรียกใช้งานฟอนต์ tp_tankhunregular

Code: Select all

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

}

h1{
    font-family: tp_tankhunregular;
}
ขอบคุณฟ้อนต์แทนคุณ
konseo
PHP Super Member
PHP Super Member
Posts: 245
Joined: 12/02/2011 12:34 am
Contact:

Re: ทำฟอนต์ให้สวยด้วย @font-face [css]

Post by konseo »

ต้อง ตั้งเป็นรายการโปรด สะแล้ว เก็บๆๆครับ
ขอบคุณครับ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests