本地字型訪問 API
本地字型訪問 API 提供了一種訪問使用者本地安裝的字型資料的機制，這包括名稱、樣式和字體系列等更高級別的詳細資訊，以及底層字型檔案的原始位元組。
概念與用法
Web 字型透過允許網頁設計師為網頁文件提供自定義字型，在網路排版方面具有革命性意義。透過 @font-face 規則指定，Web 字型可以從 url() 函式中提供的 URL 載入。
@font-face 還有其他一些有用的功能。特別是，您還可以將字型或 Postscript 名稱完全指定在 local() 函式中，以告知瀏覽器如果使用者在其計算機上安裝了該字型，則使用本地副本。這並非沒有問題，local() 已成為一種臭名昭著的 指紋識別向量。
此外，高階設計工具由於在準確列舉字型和訪問低階字型資料（例如，應用濾鏡和變換）方面存在挑戰，因此在 Web 上一直難以實現。當前應用程式通常依賴於變通方法，例如要求使用者將字型上傳到伺服器進行處理以獲取原始位元組資料，或者安裝單獨的本地程式以提供附加功能。
本地字型訪問 API 的建立旨在解決這些問題。
Window.queryLocalFonts() 方法提供對本地安裝字型陣列的訪問，每個字型都由一個 FontData 物件例項表示。 FontData 具有幾個提供名稱、樣式和字體系列訪問許可權的屬性，它還具有一個 blob() 方法，該方法提供對包含底層字型檔案原始位元組的 Blob 的訪問。
在隱私和安全方面
- 本地字型訪問 API 的設計僅限於提供解決上述問題所需的資料訪問。瀏覽器也沒有義務提供可用本地字型的完整列表，也沒有義務以與磁碟上相同的順序提供資料。
- 當呼叫
Window.queryLocalFonts()時，會要求使用者授權訪問其本地字型。此許可權的狀態可以透過 Permissions API（local-fonts許可權）進行查詢。 - 您可以使用
local-fontsPermissions Policy 來控制對該功能的訪問。
介面
FontData-
表示單個本地字型。
其他介面的擴充套件
示例
有關工作演示，請參閱我們的 本地字型訪問 API 演示。
特性檢測
if ("queryLocalFonts" in window) {
// The Local Font Access API is supported
}
字型列舉
以下程式碼段將查詢所有可用的字型，並記錄元資料。例如，這可以用於填充字型選擇控制元件。
async function logFontData() {
try {
const availableFonts = await window.queryLocalFonts();
for (const fontData of availableFonts) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}
} catch (err) {
console.error(err.name, err.message);
}
}
訪問低階資料
blob() 方法提供對低階 SFNT 資料的訪問——這是一種字型檔案格式，可以包含其他字型格式，例如 PostScript、TrueType、OpenType 或 Web Open Font Format (WOFF)。
async function computeOutlineFormat() {
try {
const availableFonts = await window.queryLocalFonts({
postscriptNames: ["ComicSansMS"],
});
for (const fontData of availableFonts) {
// `blob()` returns a Blob containing valid and complete
// SFNT-wrapped font data.
const sfnt = await fontData.blob();
// Slice out only the bytes we need: the first 4 bytes are the SFNT
// version info.
// Spec: https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
const sfntVersion = await sfnt.slice(0, 4).text();
let outlineFormat = "UNKNOWN";
switch (sfntVersion) {
case "\x00\x01\x00\x00":
case "true":
case "typ1":
outlineFormat = "truetype";
break;
case "OTTO":
outlineFormat = "cff";
break;
}
console.log("Outline format:", outlineFormat);
}
} catch (err) {
console.error(err.name, err.message);
}
}
規範
| 規範 |
|---|
| 本地字型訪問 API |
瀏覽器相容性
載入中…