发布时间:2026/8/6 17:20:33
登录界面字体抖动与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显示自动填充选项填充后一瞬间跳出默认字样但随后立即更换为目标样式。效果与预期还有一些差距但其差异也能够接受。问题基本算作解决。

相关新闻

2026/8/6 17:20:33

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

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

2026/8/6 17:20:33

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

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

2026/8/6 18:10:36

Tabular Editor:终极免费的Power BI模型管理开源工具指南

Tabular Editor:终极免费的Power BI模型管理开源工具指南 【免费下载链接】TabularEditor This is the code repository and issue tracker for Tabular Editor 2.X (free, open-source version). This repository is being maintained by Daniel Otykier. 项目地…

2026/8/6 18:10:36

车辆纵向控制:从PID算法到线控制动的工程实践

1. 从油门踏板到车轮:理解车辆纵向控制的本质踩下油门,车子加速;松开油门,车子滑行;踩下刹车,车子减速。这个看似简单的过程,背后是一套被称为“车辆纵向控制”的复杂系统在精确运作。它远不止是…

2026/8/5 3:13:11

如何用免费工具突破游戏窗口限制:SRWE完整使用指南

如何用免费工具突破游戏窗口限制:SRWE完整使用指南 【免费下载链接】SRWE Simple Runtime Window Editor 项目地址: https://gitcode.com/gh_mirrors/sr/SRWE 你是否遇到过这样的困扰?想为心爱的游戏截图,却发现游戏不支持自定义分辨率…

2026/8/6 0:04:22

电力系统调度中的源荷不确定性建模与优化实践

1. 电力系统调度中的源荷不确定性挑战现代电力系统正面临前所未有的复杂性,其中源荷不确定性(Source-Load Uncertainty)已成为调度决策中最棘手的难题之一。我在参与某省级电网调度系统升级时,曾遇到风电预测误差导致日内调度计划…

2026/8/6 0:04:22

VGG-T3技术解析:3D重建速度的革命性突破

1. 项目概述:VGG-T3如何重新定义3D重建速度在计算机视觉领域,3D场景重建一直是个计算密集型任务。传统方法重建1000帧图像规模的场景往往需要数小时甚至更长时间,而英伟达最新发布的VGG-T3技术将这个时间压缩到了惊人的54秒。这个突破性进展来…

2026/8/6 0:04:22

深度解析旅游网站建设的意义及其对行业发展的深远影响与核心价值体现

在这个数字化浪潮席卷全球的今天,我们似乎已经忘记了,曾经有一段时间,人们想要去一个陌生的地方,只能靠在书桌前翻阅厚厚的旅游杂志,或者向刚从那里回来的朋友询问那些模糊不清的印象。那时候,“远方”是一个需要精打细算才能抵达的奢侈概念。而现在,只需要一部手机,轻…

2026/8/5 19:21:13

实测才敢推 AI论文网站 2026最新测评与推荐

2026年真正好用的AI论文网站,核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测,千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队,覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。一、综…

2026/8/5 19:21:13

2026必备!AI论文网站测评:最新推荐与深度对比

2026年真正好用的AI论文网站,核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测,千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队,覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 一、…

2026/8/5 19:21:13

摆脱论文困扰!盘点2026年全网爆红的的AI论文写作工具

一天写完毕业论文在2026年已不再是天方夜谭。2026年最炸裂、实测能大幅提速的AI论文写作工具,覆盖选题构思、文献整理、内容生成、格式排版等核心场景,真正帮你高效搞定论文难题。 一、全流程王者:一站式搞定论文全链路(一天定稿首…