字间距：

实际像素大小 real_letter_spacing,(单位为px）

文字字号 font，(单位为px）

文字间距 spacing,

它们的换算关系为：

real_letter_spacing = font * 10 / spacing

如果一段文字的字号为23px，间距为100，那么实际间距为

23px * 10 / 100 = 2.3px。

从而得出前端字体间距设置2.3px方可与设计图效果一致

stype ="letter-spacing:2px";

PS与CSS字间距转换的更多相关文章

  1. css 字间距、CSS字体间距、css 字符间距设置

    1.text-indent设置抬头距离css缩进 2.letter-spacing来设置字与字间距_字符间距离,字体间距css样式

  2. div css字间距

    div:nth-child(1){ color: #FFFFFF; font-size: 13px; font-weight: bold; margin-bottom: 25px; letter-sp ...

  3. css 字间距离_css 字体字符间距设置

    介绍下css 字间距,使用css来控制字与字之间距离,也叫css字间距方法. 使用到的css样式属性单词text-indent抬头距离,letter-spacing字与字间距. Css字间距.div ...

  4. 使用CSS设置行间距，字间距.

    字间距1.text-indent设置抬头距离css缩进即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离 ...

  5. css如何设置label的字间距

    css.html如何设置label的字间距 .myClass  label{ letter-spacing: 10px; } 如果label需要居中,需加上 text-indent: 10px; 首行 ...

  6. css中字间距调整（转）

    css中字间距调整 (2014-01-02 13:51:07) 标签: 汉字 英文 间距 letter-spacing word-spacing 杂谈 分类: 网页制作 汉字间字间距设置:letter ...

  7. css文本强制一行 字间距

    white-space:nowrap 在一行 .slideLastlyNews img{margin-left:9px;margin-right:5px;margin-top:6px;width:5p ...

  8. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  9. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

随机推荐

  1. ESP32-http client笔记

    基于ESP-IDF4.1 #include <string.h> #include <stdlib.h> #include "freertos/FreeRTOS.h& ...

  2. python 子类调用 父类的构造函数

    class A(object): def __init__(self): self.nameaa = 'aa' def funca(self): print('function a %s' % sel ...

  3. 常用js代码积累

    1,js判断进入可视区,参考(亲测不行):https://www.cnblogs.com/Marydon20170307/p/8830069.html 重点学习的话,可参考: js计算元素距离顶部的高 ...

  4. linux U盘安装系统工具usb-creator-gtk

    linux平台下U盘安装linux系统的工具.它是ubuntu自带的工具,将建时将覆盖U盘中的所有内容.

  5. kubernetes/k8s CSI分析-容器存储接口分析

    更多 k8s CSI 的分析,可以查看这篇博客kubernetes ceph-csi分析,以 ceph-csi 为例,做了详细的源码分析. 概述 kubernetes的设计初衷是支持可插拔架构,从而利 ...

  6. 微信小程序云开发-数据库-用户更新数据并提交

    一.wxml增加input输入框和[更新商品价格]按钮 在商品详情页新增[更新商品价格]按钮,wxml新增部分代码,input绑定事件,用于获取用户输入的内容.按钮绑定事件,用于更新商品价格.  二. ...

  7. Centos 7 配置阿里云 yum 源

    Centos 7 配置阿里云 yum 源 一. 禁用 yum 插件 fastestmirror 修改插件的配置文件 cp /etc/yum/pluginconf.d/fastestmirror.con ...

  8. 【排序+模拟】谁拿了最多奖学金 luogu-1051

    题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 院士奖学金,每人$ 8000 $元,期末平均成绩高于\(80\)分(\(>80\)),并且在本 ...

  9. odoo12学习之javascript-----2

    用例子:Creating a new field widget 这可能是一个非常常见的用例:我们希望以非常具体(可能依赖于业务)的方式在表单视图中显示一些信息. 例如,假设我们要根据某些业务条件更改文 ...

  10. jvm源码解读--07 创建 fixup_mirrors

    通过前面的分析,创建的insttanceKlass 都没放入了java_lang_Class::fixup_mirror_list()这里类的数组里面了,所有的instance列举如下 ------- ...