之前寫了 ren1244/sfnt 給自己的 PDF 函式庫使用
其實再稍微加工一下就可以給網頁使用了
幾天才心血來潮開始動工
目前是以webfont 分支的形式先放在 github 上
後續是另外開一個儲藏庫或是合併到主分支目前我還沒想好
只是先在此分享讓大家玩看看
(沒有版本號只是我還沒想好要怎麼處理)
編輯 composer.json 檔案的 require 加入 ren1244/sfnt 的 webfont 分支如下
指定 commit 是怕我之後可能會再改東西
"require": {
"ren1244/sfnt" : "dev-webfont#c8d418fd2028693b8b6e044b6067c9f615a03025"
}
然後執行 composer install
或 composer update
安裝
詳細說明可以直接看github,這邊直接給個範例
<?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 左右