前端如何保证设置的font-family成功生效?

news2024/11/24 15:29:39

背景

最近开发的一个新页面,在产品验收的时候跟我反馈说页面里的字体跟设计稿中的字体不一样;

问题的关键是我明明记得我有单独设置过 font-family属性,于是我通过Chorme浏览器的调试工具查看了一下DOM的生效样式;

在这里插入图片描述

明明是已经设置了字体样式的,但是为什么没有生效呢?

作为前端开发者,我们知道如果设置的字体不生效,浏览器是会使用操作系统的兜底字体的,那么我们该怎么确认设置的字体是真正生效了呢?

解决方案

其实Chorme的调试工具已经提供了核实的功能:Computed => Rendered Fonts

通过Rendered Fonts功能,我核实了一下,当前DOM的字体确实没有生效,可以通过Rendered Fonts下面的 PingFang SC 看出来当前生效的字体是系统兜底的字体;

在这里插入图片描述

通过代码的排查,发现是我自己把font-family设置的有问题,于是我做了修改后再来通过Rendered Fontd 核实一下

在这里插入图片描述

可以看出来我们修改后的字体确实是生效了,于是完美解决一个BUG.

最后我们看一下正确设置字体前后的对比

在这里插入图片描述
在这里插入图片描述

仔细对比还是有区别的,还是得要一个像素眼和细心才能注意到这些细节~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/154533.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IDEA、TortoiseSVN,TortoiseGit提交忽略文件或文件夹

使用IDEA 的SVN插件提交文件是总是会提交一些不需要提交的文件; 我们可以通过一些简单设置忽略这些文件&#xff1a; 1、IDEA 1、idea设置<<--File Types<<--ignore files and folders 原有的过滤条件&#xff1a;*.hprof;*.pyc;*.pyo;*.rbc;*.yarb;*~;.DS_Store…

yolov3-tiny的darknet权重转onnx

前言 之前一直鸽了yolov3-tiny的onnx模型修复&#xff0c;今天终于把最后一个bug解决了&#xff0c;如果想直接享受成果的&#xff0c;直接点我的github仓库下载&#xff0c;使用说明都写了&#xff0c;这篇文章呢主要是给大家分享一下思路和过程&#xff0c;希望能够启发更多…

初识Linux

文章目录初识Linux操作系统概述硬件和软件操作系统常见操作系统总结初识LinuxLinux的诞生Linux内核Linux发行版总结虚拟机介绍虚拟机总结远程连接Linux系统图形化、命令行使用命令行学习Linux系统远程连接工具总结初识Linux 操作系统概述 硬件和软件 我们所熟知的计算机是由…

领域驱动设计:微服务设计为什么要选择DDD?

我们知道&#xff0c;微服务设计过程中往往会面临边界如何划定的问题&#xff0c;我经常看到项目团队为微服务到底应该拆多小而争得面红耳赤。不同的人会根据自己对微服务的理解而拆分出不同的微服务&#xff0c;于是大家各执一词&#xff0c;谁也说服不了谁&#xff0c;都觉得…

Day855.生产者-消费者模式 -Java 并发编程实战

生产者-消费者模式 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于生产者-消费者模式的内容。 Worker Thread 模式类比的是工厂里车间工人的工作模式。 但其实在现实世界&#xff0c;工厂里还有一种流水线的工作模式&#xff0c;类比到编程领域&#xff0c;就是生…

RoboMaster EP 实用功能开发(三): 基于树莓派的ROS2机器人系统搭建

功能&#xff1a;在树莓派4b上安装ros2系统&#xff0c;引入robomaster sdk&#xff0c;搭建一个基于ROS2的机器人系统&#xff0c;用于ROS系统的学习、开发和实践。 硬件&#xff1a;RobotMaster EP、树莓派4b 系统平台&#xff1a;Ubuntu 20.04、ROS2&#xff08;Foxy&…

Selenium【Selenium环境搭建与Junit5】

Selenium【Selenium环境搭建与Junit5】&#x1f34e;一. 自行下载谷歌浏览器或者火狐浏览器&#x1f352;1.1 安装好之后需要去掉谷歌(火狐)浏览器自动更新(建议)&#x1f352;1.2下载谷歌(火狐)驱动&#x1f34e;二.Selenium下载与配置&#x1f352;2.1Selenium下载&#x1f3…

服务案例|SQL Server数据库监控反复重启问题

监控平台对主流数据库的监控&#xff0c;能够及时发现异常&#xff0c;快速响应&#xff0c;保障业务系统的稳定。平台通过对SQL Server数据库监控&#xff0c;帮助用户在数据库出现异常时事件处理。 SQL Server数据库监控内容如下 1 、数据库服务器基本性能监控。包括&#…

Hive/MaxCompute SQL性能优化(三):数据倾斜优化实战

SQL性能优化系列&#xff1a;Hive/MaxCompute SQL性能优化(一)&#xff1a;什么是数据倾斜Hive/MaxCompute SQL性能优化(二)&#xff1a;如何定位数据倾斜前面介绍了如何定位数据倾斜&#xff0c;本文介绍如果遇到各种数据倾斜的情况该怎样优化代码。Map长尾优化一、Map读取数据…

ArcGIS如何将Excel表格转换为SHP格式

概述数据的获取渠道是多种多样的&#xff0c;获取的数据格式也是多种多样&#xff0c;作为一名GISer&#xff0c;需要熟练掌握各种格式的数据之间的转换&#xff0c;例如本文要介绍的Excel格式的数据&#xff0c;经常会遇到&#xff0c;这里为大家介绍一下转换方法&#xff0c;…

区块链基础知识(二)

密码学与安全技术 参考书籍 《区块链原理、设计与应用》 Hash算法 加解密算法 混合加密机制 离散对数与Diffie-Hellman秘钥交换协议 消息认证码 数字签名 PKI体系 PKI基本组件 证书签发 证书的撤销 Merkle tree结构 默克尔树逐层记录哈希值的特点&#xff0c;让它具有了一些独特…

【我的渲染技术进阶之旅】关于C++轻量级界面开发框架Dear ImGui介绍

文章目录一、怎么知道ImGui的1.1 Filament中有使用ImGui1.2 其他很多渲染框架都有使用ImGui二、ImGui介绍2.1 ImGui风格2.2 Imgui介绍2.2.1 Imgui简介2.2.2 Imgui用法2.2.3 Demo示例2.2.4 集成2.2.5 更多案例2.3 查看Imgui实例源代码2.3.1 运行demo2.3.2 项目结构分析2.3.3 示例…

TCP/IP网络编程(2)——套接字类型与协议设置

文章目录二、套接字类型与协议设置2.1 套接字协议及数据传输特性2.1.1 创建套接字2.1.2 协议族&#xff08;Protocol Family&#xff09;2.1.3 套接字类型&#xff08;Type&#xff09;2.1.4 套接字类型1&#xff1a;面向连接的套接字&#xff08;SOCK_STREAM&#xff09;2.1.5…

RHCE学习笔记-133-2

rpm and kickstart The RPM Way 不会有互动事件 可以适用在所有软件,如kernerl和其他额外的软件都可以以rpm的形式 不需要安装前面的版本才能安装后面的版本 RPM Packge manager RPM components local database /var/lib/rpm rpm and related executables package files primar…

大数据NiFi(十三):NiFi监控

文章目录 NiFi监控 一、处理器状态指示有如下几种情况 二、对于每个组的监控情况如下

CMMI之客户验收

客户验收&#xff08;Customer Acceptance, CA&#xff09;是指客户依据合同对产品进行审查和测试&#xff0c;确保产品满足客户需求。客户验收过程域是SPP模型的重要组成部分。本规范阐述了客户验收的规程&#xff0c;该规程的“目标”、“角色与职责”、“启动准则”、“输入…

Spring 源码解析~13、Spring 中的钩子函数汇总

Spring 中的钩子函数汇总 一、生命周期总览 二、BeanDefinition 生成与注册阶段 钩子执行顺序与博文顺序一致&#xff0c;即 1->n 1、EmptyReaderEventListener#defaultsRegistered 触发点&#xff1a;创建 BeanDefinitionParserDelegate 委派类时触发解释&#xff1a;通知…

本立道生:必备的基础知识

通过前面两节课的内容&#xff0c;我带领大家熟悉了一下 Visual Studio C 开发环境的必备知识&#xff0c;虽然还有很多关于 Visual Studio 的重要知识没有介绍&#xff0c;但为了让你尽快进入 C 开发环节&#xff0c;及早获得开发程序的愉悦&#xff0c;我们暂时只介绍这些必备…

【数据结构】5.5 遍历二叉树和线索二叉树

5.5.1 遍历二叉树 遍历定义 顺着某一条搜索路径巡访二叉树中的每个结点&#xff0c;使得每个结点均被访问依次&#xff0c;而且仅被访问一次&#xff08;又称周游&#xff09;。访问的含义很广&#xff0c;可以是对结点作各种处理&#xff0c;如&#xff1a;输出结点的信息&a…

Centos7开启SSH连接配置

1、查看是否已安装openssh-server&#xff1a; [rootlocalhost ~]# yum list installed | grep openssh-server 如果有信息说明已安装了openssh-server&#xff0c;如果输出没有任何结果&#xff0c;说明没有安装。 2、安装openssh-server&#xff08;如果已安装&#xff0c…