登录界面字体抖动与input输入内容样式不自动加载解决

发布时间：2026/10/7 15:12:12

登录界面字体抖动与input输入内容样式不自动加载解决
本文章仅为个人开发问题及解决方案记录代码编写并不成熟如有更好/更全面的解决方法欢迎各路老师们指导。本人感激不尽。问题登录界面字体存在加载抖动input表单默认填充账号密码需要用户点击输入框才会自动加载设置字体。推测是字体加载问题尝试进行优化。此处选择子集化常用文字以减少缓存时间编写ttf子集文件选出常用/此界面用到的字样填入文件更改引用路径并将font-face移动到全局cssHTML预加载/* 登录页子集化字体全局提前声明 preload首帧渲染 font-face 在 Vue 渲染前注册block 消除 swap 闪烁。 */ font-face { font-family: MiSans-Normal; src: url(/font/subset/MiSans-Normal-subset.ttf) format(truetype); font-display: block; } font-face { font-family: MiSans-Medium; src: url(/font/subset/MiSans-Medium-subset.ttf) format(truetype); font-display: block; }优化对比原始子集后压缩比MiSans-Normal7.58 MB102 KB98.7%MiSans-Medium7.51 MB102 KB98.7%更改public/index.html文件使其在解析阶段就开始下载字体早于js执行此处选择增加两行preload加载字体资源原代码link relicon href% BASE_URL %shuting-logo.svg script src% BASE_URL %cdn/babel-polyfill/polyfill_7_2_5.js/script修改后link relicon href% BASE_URL %shuting-logo.svg link relpreload href% BASE_URL %font/subset/MiSans-Normal-subset.ttf asfont typefont/ttf crossoriginanonymous link relpreload href% BASE_URL %font/subset/MiSans-Medium-subset.ttf asfont typefont/ttf crossoriginanonymous script src% BASE_URL %cdn/babel-polyfill/polyfill_7_2_5.js/script更改后字体抖动优化结束但input输入框内刷新/退出登陆后默认填充的账号密码未受影响还是需要用户鼠标点击输入框才会加载目标字体。或许问题不在字体加载方面尝试使用全局css文件覆盖默认填充的字样但未起效综合考虑这里直接阻止自动填充设置autocomplete属性原代码a-input v-modelmodel.username sizelarge autocompleteusername placeholder请输入用户名 svg slotsuffix viewBox0 0 1024 1024 width23 height23path dM512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667z m0-64c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667zM368.864 684.309333a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z fill#333333//svg /a-input a-input v-modelmodel.password sizelarge typepassword autocompletecurrent-password placeholder请输入密码 svg slotsuffix viewBox0 0 1024 1024 width23 height23path dM288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z fill#333333//svg /a-input修改为将两条autocomplete设置为new-passworda-input v-modelmodel.username sizelarge autocompletenew-password placeholder请输入用户名 svg slotsuffix viewBox0 0 1024 1024 width23 height23path dM512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667z m0-64c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667zM368.864 684.309333a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z fill#333333//svg /a-input a-form-model-item required proppassword a-input v-modelmodel.password sizelarge typepassword autocompletenew-password placeholder请输入密码 svg slotsuffix viewBox0 0 1024 1024 width23 height23path dM288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z fill#333333//svg /a-input值得一提的是autocomplete是主流浏览器规定的input属性许多资料显示只需要设置“autocompleteoff就能阻止表单填充然而实际上username与password不论是谁单独或同时设定off都无法阻止自动填充。在搜索后发现这样的属性失效并不罕见更有甚者曾经提交过反馈给谷歌但这都是题外话。总之将autocomplete属性设置为new-password起效。效果反应浏览器默认不填充用户点击username无反应点击password显示自动填充选项填充后一瞬间跳出默认字样但随后立即更换为目标样式。效果与预期还有一些差距但其差异也能够接受。问题基本算作解决。

相关新闻

苹果终于松口：iPhone与Windows电脑即将实现跨设备复制粘贴，欧盟DMA再下一城

苹果终于松口：iPhone与Windows电脑即将实现跨设备复制粘贴，欧盟DMA再下一城

用了这么多年苹果设备的人，大概都经历过这样一种"割裂感"——iPhone上复制一段文字，Mac上直接粘贴，丝滑得像在同一块屏幕上操作。可一旦切换到Windows电脑，这套行云流水的体验就戛然而止。复制、粘贴这两个最基础的动作…

2026/10/7 14:49:11 阅读更多 →
盈启鲲鹏本地生活直播工具

盈启鲲鹏本地生活直播工具

在本地生活赛道，直播已成商家获客的标配。但高成本、低效率、难持续，让许多中小商家在直播间门前徘徊。真人主播薪资高、专业运营难、非黄金时段流量浪费，每一道坎都让实体门店老板头疼。而AI数字人直播技术的成熟，正在悄然改变这…

2026/10/7 14:54:35 阅读更多 →
SpringBoot+Vue游戏销售管理系统开发实战

SpringBoot+Vue游戏销售管理系统开发实战

1. 项目概述：畅游游戏销售管理系统的技术架构与价值这个基于SpringBootVue的游戏销售管理系统，是我在指导计算机专业毕业设计时反复验证过的经典架构组合。系统采用前后端分离设计，后端使用SpringBoot提供RESTful API，前端通过Vue…

2026/10/7 4:24:56 阅读更多 →

最新新闻

claude-code-video-toolkit完全指南：AI智能体如何一句话从创意到成片，制作免费专业视频

claude-code-video-toolkit完全指南：AI智能体如何一句话从创意到成片，制作免费专业视频

claude-code-video-toolkit完全指南：AI智能体如何一句话从创意到成片，制作免费专业视频 【免费下载链接】claude-code-video-toolkit AI-native video production toolkit for Claude Code 项目地址: https://gitcode.com/gh_mirrors/cl/claude-code-v…

2026/10/7 15:11:14 阅读更多 →
Kolibri-1 百万上下文本地推理显存优化

Kolibri-1 百万上下文本地推理显存优化

Kolibri-1 百万上下文本地推理显存优化 一、为什么是 Kolibri-1 2026 年 10 月 5 日，德国实验室 Aleph Alpha 在 Hugging Face 开源了 Kolibri-1：一个 78B 参数的 MoE 模型，每 token 仅激活 3.46B 参数，原生支持 100 万 token&…

2026/10/7 15:11:14 阅读更多 →
开题报告为什么总被导师打回？——云智变AI官网开题报告生成功能科普

开题报告为什么总被导师打回？——云智变AI官网开题报告生成功能科普

开题报告被导师打回，最常见的原因不是学生“没想法”，而是想法没有通过一次“可行性压力测试”。你想研究某个现象，但研究问题太宽；你列了一堆文献，但没找到真正的缺口；你写了研究方法，但它回答…

2026/10/7 15:11:14 阅读更多 →
文献综述的“时间轴”困境：书匠策AI如何把“读了就忘”变成“读了就能用”

文献综述的“时间轴”困境：书匠策AI如何把“读了就忘”变成“读了就能用”

官网：www.shujiangce.com | 微信 公众号 ：书匠策AI 你有没有过这种体验：花三天读了二十篇文献，每篇都画了重点、做了笔记，但坐到电脑前准备写综述的时候，脑子里只剩下一团模糊的印象。你记得有人做过类…

2026/10/7 15:11:14 阅读更多 →
HarmonyOS 7 SlideDrop：Precise Share目标窗口与触碰坐标

HarmonyOS 7 SlideDrop：Precise Share目标窗口与触碰坐标

QuickDock 系列已经把闪控窗做完，这次我换一条完全不同的主线：HarmonyOS 7 的“碰一碰精准分享”。 HarmonyOS 7 当前官方能力说明里，对这项能力的描述很具体：手机轻触电脑或平板屏幕，系统可以识别目标窗口和触碰坐标&…

2026/10/7 15:11:14 阅读更多 →
以claude-blog为样本学习Agent Skills开发：从编排路由到代码级质量门禁的完整指南

以claude-blog为样本学习Agent Skills开发：从编排路由到代码级质量门禁的完整指南

以claude-blog为样本学习Agent Skills开发：从编排路由到代码级质量门禁的完整指南 【免费下载链接】claude-blog Claude Code blog skill suite: 30 sub-skills, 5 agents, 5-gate v1.9.0 Blog Delivery Contract, dual-optimized for Google rankings and AI citat…

2026/10/7 15:10:14 阅读更多 →

日新闻

ROS2机械臂仿真与运动控制：从URDF建模到Gazebo实战全解析

ROS2机械臂仿真与运动控制：从URDF建模到Gazebo实战全解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 1:01:58 阅读更多 →
用浏览器直接改ESP32的WiFi密码：NVS键值配置工具设计与实现

用浏览器直接改ESP32的WiFi密码：NVS键值配置工具设计与实现

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 1:02:00 阅读更多 →
芯片封装缺陷检测：扫描声学显微镜（SAT）原理与实操指南

芯片封装缺陷检测：扫描声学显微镜（SAT）原理与实操指南

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 1:02:00 阅读更多 →

周新闻

KT148A语音芯片外挂8002D功放的工程实践指南

KT148A语音芯片外挂8002D功放的工程实践指南

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 14:34:12 阅读更多 →
LLC谐振变换器增益公式推导：从FHA等效到完整归一化表达式

LLC谐振变换器增益公式推导：从FHA等效到完整归一化表达式

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 14:34:13 阅读更多 →
ARM架构深度解析：从RISC设计理念到交叉编译实战

ARM架构深度解析：从RISC设计理念到交叉编译实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 9:29:10 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 14:34:12 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 11:43:46 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/7 13:34:55 阅读更多 →