การกำหนดเพิ่ม Fonts เพื่อใช้งานใน App ของ Flutter

เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdee
เพิ่ม fonts flutter fonts

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เพิ่ม fonts flutter fonts

ดูแล้ว 5,480 ครั้ง


เนื้อหานี้จะมาแนะนำแนวทางการเพิ่มฟอนท์สำหรับ
ใช้งานใน app กรณีเราอยากได้รูปแบบฟอนท์ที่ต้องการ
แสดงใน app เป็นแบบเฉพาะตัว หรือกรณีใช้กับฟอนท์ของ
ภาษาที่ไม่ได้เป็นภาษาสากลที่ทุกเครื่องต้องมี เราสามารถฝังฟอนท์
ที่ต้องการเข้าไปใน app เพื่อใช้งานได้ดังนี้
    *ใช้เนื้อหาต่อเนื่องจากบทความ http://niik.in/961

 

เตรียมไฟล์ Fonts

   ให้เราเตรียมไฟล์ fonts ที่ต้องการ โดยใน flutter จะรองรับ 2 นามสกุลไฟล์ คือ
.ttf หรือ .otf ในตัวอย่างประกอบเนื้อหานี้ จะใช้ฟอนท์ภาษาขืนหรือไทขืน มาเป็นตัวอย่าง
 
    - ATaiThamKHNewV3-Normal.ttf
 
    เมื่อได้ไฟล์แล้ว ให้เราสร้างโฟลเดอร์ assets > fonts ไว้ใน root ของโปรเจ็ค fluter ของเรา
สำหรับเก็บไฟล์ฟอนท์ที่จะใช้งาน ก็จะได้เป็นดังนี้
 

 
 
 

กำหนดชื่อฟอนท์เพื่อใช้งาน

    ต่อไปก็ให้เราเข้าไปเพิ่มการกำหนดชื่อฟอนท์สำหรับเรียกใช้งานในโปรเจ็คในไฟล์ pubspec.yaml

 
 



 
 
    แทรกในส่วนของการกำหนดฟอนท์ประมาณนี้
 
# The following section is specific to Flutter.
flutter:

  fonts:
    - family: Taitham3
      fonts:
        - asset: assets/fonts/ATaiThamKHNewV3-Normal.ttf
 
    บันทึกไฟล์ เป็นอันเสร็จการกำหนดชื่อฟอนท์เพื่อใช้งาน
 
    ตัวอย่างแนวทางการกำหนดค่าเพิ่มเติม 
 
flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700
 
    แนวทางการกำหนดค่า
 
    - family จะเป็นส่วนของการกำหนดชื่อฟอนท์ ที่เราจะเรียกใช้งานผ่านค่า fontFamily property ของ
TextStyle object
    - asset จะเป็นส่วนของการกำหนด path ของไฟล์ฟอนท์ ไฟล์ในโฟลเดอร์นี้จะถูกรวมไปใน app ด้วย
เมื่อมีการ build app เพื่อนำไปใช้งาน
    - หนึ่งฟอนท์สามารถมีได้หลายไฟล์ ขึ้นกับรูปแบบที่จะใช้ ประกอบด้วย style, weight และ outline
    - การกำหนดค่า weight จะกำหนดค่าระหว่าง 100 - 900 เป็นเลขหลักร้อยลงท้าย 00  ค่าของส่วนนี้จะถูก
นำไปใช้ในการกำหนดค่า fontWeight property ของ TextStyle object ตัวอย่างเช่น ถ้าต้องการใช้ฟอนท์
RobotoMono-Bold เราต้องกำหนดค่า FontWeight.w700 ใน TextStyle ซึ่งเป็นการเรียกใช้งานเท่านั้น เรา
ไม่สามารถกำหนดค่าเกินค่าเดิมของฟอนท์นั้นๆ ได้
    - การกำหนดค่า style จะกำหนดเป็น italic กรณีมีการใช้งานฟอนท์แบบ italic โดยเวลาเรียกใช้ ก็จะกำหนด
ผ่านค่า fontStyle property ของ TextStyle object ในรูปแบบ FontStyle.italic เราสามารถเรียกใช้งานการ
กำหนดค่า style ตามค่าของไฟล์นั้นๆ เท่านั้น ไม่สามารถเรียกใช้เพื่อเปลี่ยนรูปแบบ style ได้ เช่น ไฟล์
Raleway-Italic จะเรียกใช้งานแบบกำหนดให้เป็น FontStyle.normal ก็จะไม่มีผลใดๆ
 
 

การเรียกใช้งานฟอนท์เป็นค่าเริ่มต้นของ App

    เมื่อเรากำหนดชื่อที่จะใช้งานแล้ว เราสามารถเลือกที่จะให้ app ของเราใช้เป็นฟอนท์นี้เป็นค่าเริ่มต้น โดย
ที่ไม่ต้องไปกำหนดแต่ละจุดเอง โดยสามารถกำหนดในส่วนของ การใช้งาน theme ดังนี้ 
 
MaterialApp(
  title: 'Custom Fonts',
  // สมมติกำหนดใช้ Taitham3 เป็นฟอนท์หลักของ app
  theme: ThemeData(fontFamily: 'Taitham3'), // กำหนดในส่วนของ theme
  home: const MyHomePage(),
);
 
    ตัวอย่างการกำหนดในไฟล์ main.dart
 
import 'package:flutter/material.dart';
import 'package:flutter_app2/screen/profile.dart';
import './screen/launcher.dart';
 
void main() {  runApp(const MyApp());}
 
// ส่วนของ Stateless widget
class MyApp extends StatelessWidget{
   const MyApp({Key? key}) : super(key: key);
   
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
                theme: ThemeData(
                    primarySwatch: Colors.blue,
                    fontFamily: 'Taitham3',  
                    textTheme: TextTheme(bodyText2: TextStyle(color: Colors.red)),
                ),
                title: 'First Flutter App',
                initialRoute: '/', // สามารถใช้ home แทนได้
                routes: {
                    Launcher.routeName: (context) => Launcher(),
                },
        );
    }
}
 
    ทดสอบเรียกใช้งานในไฟล์ home.dart โดยเราลองคัดลอกภาษาขืนมาวางแทนคำว่า Home Screen


 
 



 
 
    สังเกตจากภาพว่าในโปรแกรมแก้ไขโค้ด เราจะไม่สามารถเห็นข้อความภาษาขืนที่เอามาวางได้ เพราะไม่
รองรับภาษาดังกล่าว แต่เมื่อดูผลลัพธ์เมื่อรัน app ก็จะเป็นดังนี้


 
 



 
 
    จะเห็น app ของเรา รองรับภาษาขืนซึ่งเป็นภาษาที่ app ได้ทำการฝังฟอนท์เข้ามาใช้งานด้วย 
    ในกรณีที่เราต้องการใช้งานฟอนท์เฉพาะบางจุดใน widget เท่านั้น เราไม่จำเป็นต้องกำหนดในส่วน
ของ theme ตามตัวอย่างด้านบน แต่สามารถเรียกใช้งานในลักษณะดังนี้แทนได้

 

 



 
 
    เรากำหนดเฉพาะสำหรับข้อความที่เป็นภาษาขืน โดยกำหนด fontFamily ให้กับ TextStyle ดังรูปด้านบน
    ผลลัพธ์ที่ได้ก็จะเป็นดังนี้


 
 



 
 
    ด้วยขั้นตอนและวิธีการง่ายๆ นี้เราสามารถเลือกใช้งานฟอนท์ใน app ของเราตามต้องการได้ อย่างไรก็ตาม
ก็ควรเลือกเท่าที่จำเป็น เพราะหากมีไฟล์ฟอนท์จำนวนมาก ก็จะทำให้ app ของเรามีขนาดไฟล์ใหญ่ขึ้นตามไปด้วย
เลือกปรับประยุกต์ใช้ให้เหมาะสม


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ