CSS字母间距（letter-spacing）和字符串全长的关系_letter-spacing怎么计算-程序员宅基地
技术标签： css java 前端bug 字符串 html5 js
CSS字母间距（letter-spacing）和字符串全长的关系
问题来源
这是一个用canvas手动实现的富文本编辑的模块，发现了字符串宽度大于元素width导致了异常的显示。
分析过程
然而，所有的文字属性皆从一个用CSS版本的Demo模版中获取到的，同样的属性在CSS中正常显示，所以排除初始值不合理。
定位到核心代码，：
字符串全长=n个字符宽度+（n-1）个letterSpacing+其他
通过精确计算，发现在CSS里：
文字长度=n个字符宽度+ n个letterSpacing+其他
因为字符串“OK”的letterSpacing=-0.4，因为少累加一个，所以导致宽度偏长。
解决方案
方法一：
将宽度累加器let textGraphicsWidth = 0换成let textGraphicsWidth = textGraphicsStyle.letterSpacing，相当于补上一个letterSpacing
方法二：
重构累加函数的代码，让每个charWidth = charWidth + letterSpacing
技巧总结
chrome浏览器中，在识别单个字符在浏览器中的尺寸时，还原100%缩放，浏览器开发者模式审查元素到指定字符串，直接将鼠标光标放到对应文字处即可看到对应文字尺寸
如果需要看单个文字尺寸，双击修改即可
智能推荐
新的一年，让我们携手前行-程序员宅基地
文章浏览阅读60次。新的一年，让我们携手前行转眼一年过去了，简单总结一下2014年的主要情况，以及2015年的一些初步规划，目的是希望有更多的同仁加入到物联网操作系统的开发和推广工作中。2014年，不论是HelloX操作系统本身，还是物联网操作系统的概念和模式，都有较为明显的进展。首先，经过一年的努力，HelloX本身有了较大程度的完善，已经具备直接应用的水准：1. 成功移植到基于Cortex M3的STM32 ..._新的一年携手前行
常用webservice接口-程序员宅基地
文章浏览阅读574次。商业和贸易：1、股票行情数据 WEB 服务（支持香港、深圳、上海基金、债券和股票；支持多股票同时查询）Endpoint:http://webservice.webxml.com.cn/WebServices/StockInfoWS.asmxDisco:http://webservice.webxml.com.cn/WebServices/StockInfoWS.asmx?disc..._天气webservice
【vue】axios网络请求模块_axios 网络请求demo-程序员宅基地
文章浏览阅读573次。1、axios_axios 网络请求demo
浏览器数据库indexedDB+vue实现简单的新增、删除和获取数据列表_vue2使用indexdb-程序员宅基地
文章浏览阅读3.1k次，点赞4次，收藏8次。代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .tips{ position: fixed; right: 0;..._vue2使用indexdb
Linux下的NFS服务（包含windows10下的nfs搭建）_win10搭建nfs服务器-程序员宅基地
文章浏览阅读2.2k次，点赞2次，收藏4次。Linux下的NFS服务_win10搭建nfs服务器
ArcEngine添加指北针_arcengine指北针-程序员宅基地
文章浏览阅读2.9k次。程序主界面如下图所示：主界面代码：using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Threading.Ta..._arcengine指北针
随便推点
Java线程池ThreadPoolExecutor（下）--- 线程超时关闭自己的实现_java线程池 空闲线程超时如何关闭-程序员宅基地
文章浏览阅读2k次。《Java线程池工作原理以及常用WorkQueue》这篇文章可以参考一下，写的具体线程超时关闭机制是BlockingQueue的poll()方法实现的当一个线程的任务完成的时候，就会向workQueue的缓存里面取缓存中的任务------poll()，如果超过设定的时间还没取到任务，队列就换回null，线程就关闭自己。..._java线程池 空闲线程超时如何关闭
随手笔记——如何手写高斯牛顿法_高斯定理手写-程序员宅基地
文章浏览阅读844次。将演示如何手写高斯牛顿法。_高斯定理手写
网页设计（前端）学习笔记_前端网页设计-程序员宅基地
文章浏览阅读1.4k次，点赞7次，收藏31次。标题标签段落标签换行标签文本格式化标签图像标签。_前端网页设计
WebSphere基础知识：查看WAS版本的方式-程序员宅基地
文章浏览阅读8.2k次，点赞2次，收藏5次。知道WAS的版本号才能方便大家安装补丁和描述相关的问题，这个问题许多朋友都遇到过，本篇为大家介绍2种方法方便快捷了解自己所使用WAS的版本。 1、命令行 cd $WAS_HOME/bin ./versionInfo.sh 以上只能查看到WAS的大小版本号，并不能查看到WAS安装了其他的哪些补丁。 通过跟踪发现在 $WAS_HOME/properties/ver..._was在控制台可以看版本吗
Video-LLaMA-程序员宅基地
文章浏览阅读436次。由于这个模型里的视频帧是均匀抽取8个帧，如果只有一秒的视频，那么很容易抽到的8张图都是一样的，那么描述就会像在说车轱辘话一样，来回重复并颠倒。因此，为了符合这个模型的特点，建议先用长一点的视频，再经过快进处理。6. 图像encoder 用的是 Blip-2 中专门做图像语义理解的部分，这个部分的结构：EVA CLIP + Q-former。整个模型，蓝色的blocks都是可以被拿来直接用的，橙色部分是一定要经过训练，以促成Llama video 模型正常联通使用的。整个代码里的部件权重加载在。_video-llama
HCIA笔记（2）-程序员宅基地
文章浏览阅读25次。r1-aaa]user-interface vty 0 4:创建用于登录的接口，注意这里是虚拟接口，并不真实存在。[r1-ui-vty0-4]authentication-mode aaa——绑定aaa空间的账号和密码。MSS——最大段长度——传输层分段后的数据大小——1460字节=MTU——IP报头——TCP报头。2.应用层：DHCP—offer包—服务端—客户端—区分厂商的，华为单播发送，思科广播发送。1.应用层：DHCP——discover包—客户端—服务端—广播发送的数据包。