درس هفدهم: استفاده از فونت‌ها در Webpack

در این قسمت می خواهیم به مبحث خاصی در رابطه با Webpack بپردازم. ما برای اینکه بتوانیم از فونت های شخصی خودمان در webpack استفاده نماییم باید از روش خاصی را پیروی کنیم. برای شروع این جلسه باید کدهای آن را از این لینک دانلود نمایید.

در حال حاضر همه چیز در این برنامه از فونت های پیش فرض مرورگر استفاده می کند. برای شروع می توانیم از google fonts استفاده کنیم. با مراجعه به این سایت فونت دلخواه خود را انتخاب و دانلود کنید (من open-sans را انتخاب می کنم). در پکیج دانلود شده انواع مختلف فونت انتخاب شده (bold و semi-bold و regular و غیره) وجود دارند و فرمت همگی شان ttf است. اگر دوست دارید فرمت فونت هایتان متفاوت باشند باید از ابزار های آنلاین مانند وب سایت onlinefontconverter.com استفاده کنید. مثلا در این سایت فرمت های ttf و woff و woff2 را انتخاب می کنم و Select fonts را می زنم. با این کار پنجره ای برای من باز می شود و از من می خواهم فونت هایم را روی سایت آپلود کنم. در نهایت می توانید پس از مقداری صبر، فونت های خود را با فرمت جدید دانلود کنید. از آنجایی که من سه فرمت Ttf و Woff و Woff2 را انتخاب کرده بودم، سه پکیج مختلف برای من دانلود می شود که هر کدام دارای فرمت های خاصی هستند.

در مرحله بعد در پوشه src پوشه دیگری به نام fonts را ایجاد کرده و فونت های مورد علاقه ام را به درون آن انتقال می دهم. من هر سه فرمت ttf و woff و woff2 را درون این پوشه قرار داده ام و از طرفی سه نسخه مختلف از فونت را انتخاب کرده بودم (یکی regular و دیگری semi-bold و دیگری light که مجموعه می شود 9 فونت مختلف. حالا در پوشه Src یک فایل دیگر به نام index.scss بسازید. این فایل قرار است حاوی استایل هایی باشد که تمام برنامه را هدف قرار می دهند. همانطور که می دانید برای مشخص کردن فونت های شخصی باید از دستور font-face در زبان CSS استفاده نماییم، بنابراین در همان فایل index.scss می گویم:

@font-face {
    font-family: 'Open Sans';
    font-weight: 300;
    src: url('./fonts/OpenSans-Light.woff2') format('woff2'),
         url('./fonts/OpenSans-Light.woff') format('woff'),
         url('./fonts/OpenSans-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: 400;
    src: url('./fonts/OpenSans-Regular.woff2') format('woff2'),
         url('./fonts/OpenSans-Regular.woff') format('woff'),
         url('./fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: 600;
    src: url('./fonts/OpenSans-SemiBold.woff2') format('woff2'),
         url('./fonts/OpenSans-SemiBold.woff') format('woff'),
         url('./fonts/OpenSans-SemiBold.ttf') format('truetype');
}

html {
    body {
        font-family: 'Open Sans', Arial, sans-serif;
        font-weight: 300;
    }
}

من در هر کدام از این Font-face ها به سراغ یک نوع از فونت opensans رفته ام (وزن های 300 و 400 و 600). همچنین برای هر کدام از این فونت ها، سه فرمت مختلف ttf و woff و woff2 را ارائه داده ام. من این کار را برای مفصل تر کردن مثال انجام داده ام و گرنه در در برنامه های واقعی نیازی نیست که بدین شکل صفحات خود را پر از فونت کنید. این کار سرعت بارگذاری صفحات را پایین می آورد.

نهایتا پس از تعریف Font-face ها، فونت opensans را به قسمت body صفحه HTML اضافه می کنم. این کار باعث تغییر فونت صفحات ما می شود. زمانی که فونتی را به کل body می دهید یعنی می خواهید آن را به عنوان فونت پیش فرض برای تمام صفحه در نظر بگیرید. حالا به فایل index.js رفته و index.scss را قبل از تمام دستورات دیگر import کنید:

import './index.scss';

import HelloWorldButton from './components/hello-world-button/hello-world-button.js';
import Heading from './components/heading/heading.js';

در مرحله نهایی باید به فایل webpack.dev.config.js برویم و یک rule دیگر را برای فونت هایمان تعریف کنیم. من کدهای آماده را در اختیار شما قرار می دهم:

// بقیه کدها //
            {
                test: /\.hbs$/,
                use: [
                    'handlebars-loader'
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eot)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            }
// بقیه کدها //

بگذارید کد بالا را برایتان توضیح بدهم. در ابتدا (woff(2 را داریم. عدد 2 در پرانتز قرار گرفته است که در Regex به معنی «شاید باشد، شاید نباشد» است. یعنی شاید فرمت ما woff باشد و شاید هم woff2 باشد. سپس علامت | (معمولا به نام pipe شناخته می شود) را داریم که به معنای «یا» است. یعنی یا (woff(2 یا ttf یا eot. هر کدام از این فونت ها را که داشتیم، این قانون بر آن اعمال خواهد شد. حالا قانون ما (rule) چیست؟ قانون این است که loader خاصی به نام file-loader را نیازی داریم. در قسمت options این قانون هم نام فونت را تعیین کرده ایم. [name] یعنی نام اصلی فایل و [ext] یعنی پسوند (extension) فایل. به زبان ساده تر یعنی نام فایل را بهم نزن و هیچ هش یا علامت دیگری را به آن اضافه نکن، بلکه نام اصلی را نگه دار. در نهایت outputPath را داریم که مسیر خروجی فونت ها را مشخص می کند. من می خواهم فونت های خودم را درون یک پوشه جداگانه به نام fonts بگذارم بنابراین آدرس بالا را به آن دادم.

در نهایت باید همین rule را کپی کرده و درون فایل webpack.production.config.js قرار می دهم:

{
    test: /\.(woff(2)?|ttf|eot)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'fonts/'
            }
        }
    ]
}

نکته: اگر ویدیو ها را از قسمت اول دنبال کرده باشید باید file-loader را نصب داشته باشید اما اگر بدون مطالعه قسمت های قبل در حال مطالعه این قسمت هستید یا اینکه کدها را همراه من ننوشته و فقط از لینک اول جلسه دانلود کرده اید، file-loader برای شما نصب نیست. با اجرای کد زیر می توانید آن را نصب کنید:

npm install file-loader --save-dev

همچنین اگر نمی دانید file-loader را نصب دارید یا نه، با اجرای دستور بالا مشکل خود را حل خواهید کرد چرا که:

• اگر file-loader را نصب نداشته باشید، برایتان نصب خواهد شد.
• اگر file-loader را نصب داشته باشید، به روز رسانی خواهد شد (در صورت وجود آپدیت جدید)

حالا برای تست کردن برنامه دستور npm run dev را اجرا می کنیم. با رفتن به آدرس localhost:9000 باید برنامه خود را با فونت جدید مشاهده کنید.