codecamp

Tauri 删除不必要的自定义字体

考虑不将自定义字体与你的应用一起发布,而是依赖系统字体。如果必须包含自定义字体,请确保它们采用现代、经过优化的格式,如​woff2​。

字体可能相当大,因此使用操作系统已经包含的字体可以减小你的应用程序的占用空间。这还可以避免 FOUT(未样式化文本的瞬间闪烁),使你的应用程序感觉更加“原生”,因为它使用与其他所有应用程序相同的字体。

如果必须包含自定义字体,请确保它们采用现代格式,如woff2,因为这些格式往往比传统格式要小得多。

在你的 CSS 中使用所谓的“系统字体堆叠”(System Font Stacks)。有许多变种,但以下是三个基本的示例供你参考:

无衬线字体

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

衬线字体

font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid
Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

等宽字体

font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation
Mono, monospace;

这些系统字体堆叠将根据用户的操作系统和设置选择适当的字体,以提供一致的外观和更好的性能。


Tauri 优化图片
Tauri 配置 Allowlist
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Tauri 指南

Tauri 特性

Tauri 插件

Tauri 应用程序接口

Tauri JavaScript/TypeScript

Tauri 命令行界面

Tauri 进程

Tauri 参考

Tauri WebView 版本

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }