css font 优化
文章目录
- 使用 font-display 控制字体加载
- 预加载关键字体
- 选择合适的字体文件类型
- 按需创建字体文件
- HTTP 缓存优化
使用 font-display 控制字体加载
避免字体加载导致的空白
- block：浏览器在短暂的阻塞期内不显示任何文本，直到字体加载完成。这可能导致页面渲染被阻塞，用户看到空白内容。
- swap（推荐）：浏览器立即显示后备字体，等自定义字体加载完后替换。这能确保文字立即可见，同时确保最终显示自定义字体。
- fallback （推荐）：浏览器使用一个短暂的阻塞期，然后使用后备字体，最后加载自定义字体。这是 block 和 swap 的折衷方案
- optional：浏览器会尽快显示后备字体，并且如果自定义字体未能快速加载，则不加载。
预加载关键字体
<link rel="preload" href="myiconfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">选择合适的字体文件类型
- 选择适当的格式，使用现代的字体格式如 WOFF2，可以有效减少字体文件的大小
按需创建字体文件
- 如果只需要特定的字体，而不是整个字体库，可以使用工具如 Glyphhanger 或 Font Squirrel 来生成子集
HTTP 缓存优化
- 通过 HTTP 头（如 Cache-Control 和 Expires）配置浏览器缓存字体文件
相关文章：
css font 优化
文章目录 使用 font-display 控制字体加载预加载关键字体选择合适的字体文件类型按需创建字体文件HTTP 缓存优化 使用 font-display 控制字体加载 避免字体加载导致的空白 block：浏览器在短暂的阻塞期内不显示任何文本，直到字体加载完成。这可能导致页…...
Go之Web急速入门Gin+Gorm框架
简介 只作为快速入门、了解Go的GinGorm框架的demo，不能作为企业级开发。 详细用法请看官网 《Gin官网》 《Gorm官网》 使用GoLand创建Go项目（默认modules） go版本1.22.2 需要设置代理下载go相关软件包，否则软件包可能无法下载。…...
【MySQL进阶之路 | 高级篇】ER模型
1. 概述 数据库设计是牵一发而动全身的。那么有没有什么办法可以提前看到数据库的全貌呢？比如需要哪些数据表，数据表中应该有哪些字段，通过什么字段进行连接等等。这样我们才能进行整体的梳理和设计。 其实，ER模型就是一个这样的…...
C++基础语法:STL之容器(4)--序列容器中的list(一)
前言 "打牢基础,万事不愁" .C的基础语法的学习 引入 序列容器的学习.以<C Prime Plus> 6th Edition(以下称"本书")内容理解 本书中容器内容不多只有几页.最好是有数据结构方面的知识积累,如果没有在学的同时补上. 序列容器回顾:序列容器内元素按严格…...
WordPress杂技
WordPress杂技 WordPress页面构建器: Avada、Elementor、astra、 Elementor作为一款强大的页面构建工具。 Avada：是一款非常受欢迎的WordPress主题，它的设计理念是简洁、现代、响应式，Avada拥有丰富的模板和布局，可以轻松创建出…...
鸿蒙 动态共享包HSP的创建和引用
1.什么是动态共享包HSP HSP（Harmony Shared Package）是动态共享包，可以包含代码、C库、资源和配置文件，通过HSP可以实现代码和资源的共享。HSP不支持独立发布，而是跟随其宿主应用的APP包一起发布，与宿主应…...
ARM架构（二）—— arm v7-a/v8/v9寄存器介绍
1、ARM v7-A寄存器 1.1 通用寄存器 V7 V8开始 FIQ个IRQ优先级一样， 通用寄存器：31个 1.2 程序状态寄存器 CPSR是程序状态毒存器，保存条件标志位，中断禁止位，当前处理器模式等控制和状态位。每种异常模式下还存在SPS…...
C++合作开发项目：美术馆1.0
快乐星空MakerZINCFFO 合作入口：CM工作室 效果图： 代码： （还有几个音乐！） main.cpp #include <bits/stdc.h> #include <windows.h> #include <conio.h> #include <time.h> #in…...
 和继承 QObjectUserData)
QT 5 同时使用Q_DECLARE_METATYPE(pointdata) 和继承 QObjectUserData
在Qt框架中，QObjectUserData 和 Q_DECLARE_METATYPE() 宏都与Qt的元对象系统有关，但它们的使用方式有一些特别的限制和兼容性问题。 关于QObjectUserData： QObjectUserData 是一个用来存储用户数据的类。在Qt中，每个 QObject 可以…...
【MySQL进阶之路 | 高级篇】范式概述与第一范式
1. 范式简介 在关系型数据库中，关于数据表的设计的基本原则，规则就称为范式。可以理解为，一张数据表的设计结果需要满足的某种设计标准的级别。要想设计一个结构合理的关系型数据库，必须满足一定的范式。 范式的英文名是Normal …...
Open-TeleVision复现及机器人迁移
相关信息 标题 Open-TeleVision: Teleoperation with Immersive Active Visual Feedback作者 Xuxin Cheng1 Jialong Li1 Shiqi Yang1 Ge Yang2 Xiaolong Wang1 UC San Diego1 MIT2主页 https://robot-tv.github.io/链接 https://robot-tv.github.io/resources/television.pdf代…...
Notepad++换安装路径之后，右键打开方式报错：Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。的处理方法
把Notepad添加到右键打开方式，可以参考下面的3篇文章添加： https://blog.csdn.net/xiaoerbuyu1233/article/details/88287747 https://blog.csdn.net/qq_44000337/article/details/120277317 https://www.cnblogs.com/zhrngM/p/12899026.html 这里主要是…...
【Flutter 面试题】 使用成熟状态管理库的弊端有哪些？
【Flutter 面试题】 使用成熟状态管理库的弊端有哪些？ 文章目录 写在前面口述回答补充说明写在前面 🙋 关于我 ，小雨青年 👉 CSDN博客专家，GitChat专栏作者，阿里云社区专家博主，51CTO专家博主。2023博客之星TOP153。 👏🏻 正在学 Flutter 的同学，你好！ 😊 …...
Apache Commons技术详解
文章目录 简介官网链接原理基础使用Commons LangCommons Collections 高级使用Commons IOCommons Math 优缺点优点缺点 总结 简介 Apache Commons 是 Apache 软件基金会下的一个项目，旨在提供可重用的Java组件。这些组件覆盖了广泛的编程任务，从字符串处…...
怎样使用 Juicer tools 的 dump 命令将.hic文件转换为交互矩阵matrix计数文件 (Windows)
创作日志： 万恶的生信…一个scHiC数据集没有提供处理好的计数文件，需要从.hic转换。Github一个个好长的文档看了好久才定位到 juicer tools 的dump命令，使用起来比想象中简单。 一、下载Juicer tools 注意：使用Juicer tools的前提…...
【Docker】Docker Desktop - WSL update failed
问题描述 Windows上安装完成docker desktop之后，第一次启动失败，提示：WSL update failed 解决方案 打开Windows PowerShell 手动执行： wsl --set-default-version 2 wsl --update...
基于rsync\unlink 等一套本机备份跨机备份历史备份清理shell 脚本
一 摘要 本文主要介绍一套本地备份、跨机器备份、历史备份清理脚本，使用场景如数据库备份等 二 环境 linux 系列系统 基本都支持，个别命令可能需要微调。 2.1 实验环境 [rootlocalhost rsync]# cat /etc/centos-release CentOS Linux release 7.9.2…...
使用nginx实现一个端口和ip访问多个vue前端
前言：由于安全组要求，前端页面只开放一个端口，但是项目有多个前端，此前一直使用的是一个前端使用单独一个端口进行访问，现在需要调整。 需要实现：这里以80端口为例，两个前端分别是：p…...
Linux云计算 |【第一阶段】SERVICES-DAY5
主要内容： 源码编译安装、rsync同步操作、inotify实时同步、数据库服务基础 实操前骤：（所需tools.tar.gz与users.sql） 1.两台主机设置SELinnx和关闭防火墙 setenforce 0 systemctl stop firewalld.service //停止防火墙 sy…...
IP第一次综合实验
一、实验拓扑 二、实验要求 1、R6为ISP，接口IP地址均为公有地址，该设备只能配置地址之后不能冉对其进行任何配置 2、R1-R5为局域网，私有Ip地址192.168.1.0/24，请合理分配 3、R1、82、R4，各有两个环回IP地址;R5,R6各…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...
【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看
文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...
代码规范和架构【立芯理论一】（2025.06.08）
1、代码规范的目标 代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...
安卓基础（Java 和 Gradle 版本）
1. 设置项目的 JDK 版本 方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...