本文章仅为个人开发问题及解决方案记录代码编写并不成熟如有更好/更全面的解决方法欢迎各路老师们指导。本人感激不尽。问题登录界面字体存在加载抖动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显示自动填充选项填充后一瞬间跳出默认字样但随后立即更换为目标样式。效果与预期还有一些差距但其差异也能够接受。问题基本算作解决。
本文章仅为个人开发问题及解决方案记录代码编写并不成熟如有更好/更全面的解决方法欢迎各路老师们指导。本人感激不尽。问题登录界面字体存在加载抖动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显示自动填充选项填充后一瞬间跳出默认字样但随后立即更换为目标样式。效果与预期还有一些差距但其差异也能够接受。问题基本算作解决。
