PHP 動態產生 Webfont

php webfont ttf otf woff

淺水員 2024-07-21 21:50:09 ‧ 491 瀏覽

分享至

之前寫了 ren1244/sfnt 給自己的 PDF 函式庫使用
其實再稍微加工一下就可以給網頁使用了
幾天才心血來潮開始動工

目前是以webfont 分支的形式先放在 github 上
後續是另外開一個儲藏庫或是合併到主分支目前我還沒想好
只是先在此分享讓大家玩看看
（沒有版本號只是我還沒想好要怎麼處理）

系統需求

PHP8.0 以上
mbstring extension

安裝

編輯 composer.json 檔案的 require 加入 ren1244/sfnt 的 webfont 分支如下
指定 commit 是怕我之後可能會再改東西

"require": {
    "ren1244/sfnt" : "dev-webfont#c8d418fd2028693b8b6e044b6067c9f615a03025"
}

然後執行 composer install 或 composer update 安裝

使用

詳細說明可以直接看github，這邊直接給個範例

一般 Webfont

<?php

require(__DIR__ . '/vendor/autoload.php');

use ren1244\sfnt\Helper;

$text = '御劍乘風來，除魔天地間；
有酒樂逍遙，無酒我亦顛。
一飲盡江河，再飲吞日月；
千杯醉不倒，唯我酒劍仙。';

// 讀取字型檔案
// 字型第一次使用會在 cache 資料夾建立一些資料讓之後使用可以加速
$sfnt = Helper::loadFont(
    __DIR__ . '/assets/ThePeakFontBeta_V0_101.ttf',
    __DIR__ . '/cache'
);

// 取得 woff 檔案內容
$woff = Helper::getSubsetWoff($sfnt, $text);

// 因為檔案不大，方便起見，此範例直接做成 dataurl
$url = 'data:font/woff;base64,' . base64_encode($woff);
?>
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        @font-face {
            font-family: 'custom';
            src: url("<?php echo $url;?>");
        }
        .ft-custom {
            font-family: 'custom';
            font-size: 20pt;
        }
    </style>
    <pre class="ft-custom"><?php echo $text; ?></pre>
</body>
</html>

在我的電腦測試上述程式碼，整個 html 檔案大小是 40k 左右