前端电子表数字字体_CSS字体：字体特性

最新推荐文章于 2023-08-15 23:14:30 发布
最新推荐文章于 2023-08-15 23:14:30 发布
阅读量2.8k 收藏 1
点赞数
文章标签： 前端电子表数字字体 各种数字字体样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39725650/article/details/111289373
版权

编者按：本文作者李松峰，资深技术图书译者，翻译出版过40余部技术及交互设计专著，现任360奇舞团Web前端开发资深专家，360前端技术委员会委员、W3C AC代表。

CSS Font Module Level 3(本文以下简称“ML3”)新增了字体特性(Font Feature)属性，用于扩展font-variant，以支持丰富OpenType字体特性，如连字。

我们知道，字体文件中包含着从Unicode码点到字形的映射。在给简单的拉丁文本应用字体时，就是根据字体文件中的映射表逐个把对应的字形找到并显示出来。而OpenType和AAT(Apple Advanced Typography)等字体标准支持更复杂的处理模式。比如，给定字符的字形不仅可以根据码点来选择和定位，也可以根据相邻字符或者语言、文字以及文本本身启用的特性来选择和定位。

风格性的字体特性分两类：影响与周围字符关系的和影响字形选择的。前者比如字距调整(kerning)和连字(ligature)相关的特性，后者比如小型大写字母(small-caps)、上/下标(superscript/subscript)及替代(alternate)特性。

为了支持这些字体特性，ML3扩展了font-variant，基于它增加了很多子属性用于控制相应的字体特性，比如font-variant-ligatures、font-variant-position、font-variant-caps、font-variant-numeric、font-variant-east-asian。而font-variant则变成了一个涵盖所有这些属性的简写属性，类似font那样。不过，以上这些子属性只会影响字形选择与定位，不影响字体选择。

因为这些字体特性都与风格有关，所以字体特性的英文也叫stylistic font features。这个意义上，unstyled text就不是"未应用样式文本"，而是"未启用风格化字体特性的文本"。

font-kerning

用于根据字体文件中的数据来调整字形间距。auto表示由UA决定，normal表示应用字体文件中的数据，none表示不应用。

4e82368d1e1afc7971cbaf340e0cd233.png

对于不包含相关数据的字体，这个属性没有影响。OpenType标准建议默认启用间距调整，即应用OpenType的kern特性(对于垂直文本则是vkrn)。如果同时定义了letter-spacing属性，则字体内置的间距作为默认值，在此基础上再进行调整。

font-variant-ligatures

用于跟上下文构形(contextual form)一起组合字形以得到更和谐的文本呈现效果。

  • normal表示启用公共默认特性，对OpenType字体则意味着默认启用普通/标准(common)连字和上下文构形，禁用自由(discretionary)连字和传统(historical)连字。

  • none表示明确禁用任何形式的连字和上下文构形。

  • common-ligatures启用普通/标准连字(对应OpenType特性liga、clig)。对于OpenType字体，普通/标准连字默认是启用的。

    f161360fe0aee6e2efa97eb1d592527b.png

  • no-common-ligtures禁用普通/标准连字。

  • discretionary-ligatures启用自由连字(对应OpenType特性dlig)，这种连字是自由的或者说可选的，由字体设计者自行决定。至于哪些地方会连字，需要参考字体文档。

    8711e7d59e99bc12982edada239cbe14.png

  • no-discretionary-ligatures禁用自由连字。

  • historical-ligatures启用传统连字(对应OpenType特性hlig)。

    21bc973472021e99e94d23b507195147.png

  • no-historical-ligatures禁用传统连字。

  • contextual启用上下文替代(contextual alternates，对应OpenType特性calt)，虽然不是严格意义上连字特性，但这个特性常用于让字形与周围内容更和谐。对于OpenFont字体，这个特性默认打开。

    b282b5d033332a997fc77d253ee8ae9f.png

  • no-contextual禁用上下文替代。

为了正确渲染复杂文字而必需的连字(对应OpenType特性rlig)，不受以上设置的影响，包括none。

font-variant-position

用于在排版中使用上标和下标字形。这些字形是单独设计的，但它们的字框与默认字形是一样的。目的就是无需缩放或调整基线，就可以像使用默认字形一样直接使用它们。从下图可以看出下标字形(上)与合成下标(下)的区别：

a28a5697d05f2c8c7513da1937bb7741.png

  • normal不应用下面的特性。

  • sub显示下标变体(OpenType特性subs)。

  • super显示上标变体(OpenType特性sups)。

如果字体文件中没有相应的变体，UA需要基于正常字形缩小后合成。这两个值不支持嵌套应用(即不累积)，另外对行内图片应用这两个值，效果如同应用normal。

考虑到以前UA会通过给sub和sup元素设置相应的font-size和vertical-align属性来模拟下标和上标，样式表作者最好通过CSS3条件来应用font-variant-position属性，以实现向后兼容。

比如，UA通过对sub元素应用以下样式：

sub {

  vertical-align: sub;

  font-size: smaller;

  line-height: normal;

}

而这样使用font-varian-position则可以保证不支持用户代理也能正常显示下标：

@supports ( font-variant-position: sub ) {

  sub {

    vertical-align: baseline;

    font-size: 100%;

    line-height: inherit;

    font-variant-position: sub;

  }

}

font-varian-caps

这个属性用于从字体中选择专门设计的小型大写字母字形。

  • normal不应用下面的特性。

  • small-caps用小型大写字母显示小写字母(OpenType特性smcp)。小型大写字母是小写字母大小的大写字母，通常比x高度高30%，或者是大写字母高度的70%。

    fb6ae9d3b67f538f8c3e39da50576276.png

  • all-small-caps大写字母和小写字母都显示为小型大写字母(OpenType特性c2sc、smcp)。

    7ad910c3693ad1063ba23b7dbb75def7.png

  • petite-caps用短身(petite)大写字母显示小写字母(OpenType特性pcap)。短身大写字母的高度等于x高度。

    f4785a20e185a3103bc79319d5a5e214.png

  • all-petite-caps大写字母和小写字母都显示为短身大写字母(OpenType特性c2pc、pcap)。

    fa0e37beec3adbf9ac3d2f999eebfcb9.png

  • unicase大写字母转换为小型大写字母与小写字母混合显示(OpenType特性unic)。

    ce2648bf1df9a666a217570e67767010.png

  • titling-caps用标题大写字母显示小写字母(OpenType特性titl)。

    a97a05e7dae48916f45759e806e822c0.png

如果字体不支持small-caps，UA需要用大写字母合成。如果字体不支持petite-caps，则petite-caps和all-petite-caps相当于指定small-caps和all-small-caps。如果字体不支持unicase，则该属性就像small-caps只应用给大写字母。如果字体本身不支持titling-caps，则视觉上无变化。对于不区分大小的文字，small-caps、all-small-caps、petite-caps、all-petite-caps和unicase视觉上无变化。

在模拟小型大写字母时，结果必须与text-transform属性的结果保持一致。

font-variant-numeric

控制如何显示数字值。

  • normal不应用下面的特性。

  • lining-nums等高数字(OpenType特性lnum)。

    6394a3116392249d5dbe6f8616e7e9dc.png

  • oldstyle-nums旧样式数字(OpenType特性onum)，高度可能不相等。

    3c98b81d6e2216aacd992b17b4fb299a.png

  • proportional-nums比例数字(OpenType特性pnum)，宽度可能不相等。

    186415939e7ce48e998997073d5df10f.png

  • tabular-nums等宽数字(OpenType特性tnum)。

    5ed07afeb7e38a181ceca55f65b285e9.png

  • diagonal-fractions斜角分数字(OpenType特性frac)。

    8b9c69fca99e8907f93c0f29643ddd57.png

  • stacked-fractions标准分数字(OpenType特性afrc)

    abdf7e842c2bbc1d8920cfa88352703a.png

  • ordinal序数字(OpenType特性ordn)

    334a678ee50c237e8b16d939f68eeb3f.png

  • slashed-zero带斜线的零(OpenType特性zero)。

    e6b089e61a3db05c168d5521e9835384.png

对于ordinal来说，虽然序数也以上标形式出现，但标记不同。对于上标，通常这样标记和应用样式：

sup { font-variant-position: super; }

x<sup>2sup>

而对于序数，则这样标记和应用样式：

.ordinal { font-variant-numeric: ordinal; }

<span class="ordinal">17thspan>

这里的th会变成序数形式，而数字不变。当然，在有些语言里，序数也不是上标形式。

font-variant-east-asian

控制东亚文字的替代及大小。

  • normal不应用以下特性。

  • jis78将默认日文替换成JIS78中对应的字形(OpenType特性jp78)。

    ab9e22afffa3279ce7ec3161bce3a11c.png

  • jis83将默认日文替换成JIS83中对应的字形(OpenType特性jp83)。

  • jis90将日文替换成JIS90中对应的字形(OpenType特性jp90)。

  • jis04使用JIS2004中的日文字形(OpenType特性jp04)。

    以上JIS变体主要对应不同版本的日语国际标准。字体通常按照最新国际标准设计，但显示时偶尔需要使用旧的变体，比如匹配标志。

  • simplified应用简体形式(OpenType特性smpl)。

  • traditional应用繁体形式(OpenType特性trad)。

    783bd187a4dbf6792a87cafe9ff29e84.png

    simplified和traditional用于控制文字以简化写法还是传统写法显示。

  • full-width应用全宽变体(OpenType特性fwid)。

    0883a933933b0661ccf09c02ee45e1c8.png

  • proportional-width应用比例间距变体(OpenType特性pwid)。

    66bc7e3260b3b7bd2a93500af46f2bd6.png

  • ruby应用注音/注释变体(OpenType特性ruby)。由于注音/注释文本通常比较小，字体设计者通常特别设计相应字形。

    5df79f7ac2607cddb3ad71f1a474018c.png

font-variant

如前所述，font-variant是所有字体变体子属性的简写形式。它的值normal会将所有子属性的值重置为初始值。none将font-variant-ligatures设置为none，将其他特性设置为各自的初始值。与其他简写属性一样，font-variant会将未指定的子属性重置为各自的初始值。

font-variant不会重置font-feature-settings属性。

font-feature-settings

这是用于控制OpenType字体特性的一个低级属性。这个属性旨在访问那些使用不广泛但有时候却必要的特性。

正常情况下，应该使用font-variant及其子属性。只有在那些属性不够用的情况下，再使用font-feature-settings。

/* 应用小型大写字母和第二个花饰字替代 */

font-feature-settings: "smcp", "swsh" 2;

normal值表示字形选择和定位不会发生变化。特性值标签的格式如下：

= [ | on | off ]?

是区分大小写的OpenType特性标签，由4个小写字母构成。不存在的标签会被忽略。UA不会合成字体本身不支持的特性。唯一例外是kern；如果字体的kern表中有字距调整数据，而GPOS表里显示不支持kern特性，UA也会合成。

如果存在，表示用于字形选择的索引，必须大于等于0。0表示禁用相应特性。对于布尔值特性，1表示启用该特性。对于非布尔值特性，大于等于1的值表示启用该特性，以及该特性的选择索引。值on相当于1，值off相当于0。如果没有指定这个部分的值，则假定值为1。

font-feature-settings的计算属性是一个映射，因此不存在重复指定的值。如果存在多次指定同一属性的值，则最后一个覆盖前面的。

font-feature-settings: "dlig" 1; /* dlig=1 启用自由连字 */

font-feature-settings: "smcp" on; /* smcp=1 启用小型大写 */

font-feature-settings: 'c2sc'; /* c2sc=1 全部小型大写 */

font-feature-settings: "liga" off; /* liga=0 禁用标准连字 */

font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 启用表列数字及传统连字 */

font-feature-settings: "tnum" "hist"; /* 无效，缺少逗号 */

font-feature-settings: "silly" off; /* 无效，标签过长 */

font-feature-settings: "PKRN"; /* PKRN=1 启用自定义特性 */

font-feature-settings: dlig; /* 无效，标签不是字符串 */

虽然特性标签是为OpenType字体的特性打造的，但其他现代字体格式的特性也可以以OpenType标签的模式来注册。

小结

综观所有font-variant的子属性，视觉上可以看得到的，好像只有font-variant-east-asian与汉字有关(比如traditional把简体转换成繁体，ruby选择注音/注释字形)。当然，font-variant-ligatures也可能与汉字有关，如果行、草字体如果有连字替换设计的话。

虽然大多数属性都与字母文字相关，但在国际化的今天，了解这些文字的展示也是有益的。

参考链接

  • CSS Fonts Module Level 3：https://www.w3.org/TR/css-fonts-3/

  • The Complete CSS Demo for OpenType Features：https://sparanoid.com/lab/opentype-features

  • Syntax for OpenType features in CSS：https://helpx.adobe.com/fonts/using/open-type-syntax.html

  • An Introduction to OpenType Substitution Features：https://ilovetypography.com/OpenType/opentype-features.html

  • CSS Conditional Rules Module Level 3：https://www.w3.org/TR/2013/CR-css3-conditional-20130404/

  • OpenType sepc - Feature tags：https://docs.microsoft.com/zh-cn/typography/opentype/spec/featuretags

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

9ef54e6316f47561902528cef8244d52.png

weixin_39725650
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
digital-7字体（LED数字样式字体）
02-27
digital-7字体（LED数字样式字体）。该字体主要用于显示LED数字灯样式的字体。直接导入到Android assets文件下，作为font 字体使用。
UnidreamLED
10-28
UnidreamLED
android电子表字体包
01-05
适用于任何机械面板的字体
CSS教程:网页英文字体和中文字体应用
12-04
在西方國家的字母體系，分成兩大字族：serif 及 sans serif。其中 typewriter 打字機字體，雖然也是 sans serif，但由於他是等距字，所以另獨立出一個 Typewriter 字族出來。 serif 的意思是，在字的筆畫開始及結束的地方有額外的裝飾，而且筆畫的粗細會因直橫的不同而有不同。相反的，sans serif 就沒有這些額外裝飾，而且筆畫粗細大致上是差不多。 像 Times、Times New Roman 等都是屬於 serif 的字體，而 Arial、helvetica 則是屬於 sans serif 的字體。 serif 和 sans serif 的一
Praticando_HTML_CSS_-JS:与前端相关的研究，使用 HTML、CSS 和 JS
05-29
HTML、CSS 和 JavaScript 研究 描述 ： 与前端相关的研究，使用 HTML、CSS 和 JS。 描述： 与前端相关的研究，使用 HTML、CSS 和 JS。
css 数字美化 【电子表】
01-12
css 数字美化， 电子表样式
实现电子表字体效果
weixin_44941576的博客
08-15 193
在可视化中将数字转为电子表字体
前端 字体设置，中英文对照表 常用字体种类
柑橘乌云_
05-31 2285
华文细黑：STHeiti Light [STXihei]华文黑体：STHeiti华文楷体：STKaiti华文宋体：STSong华文仿宋：STFangsong儷黑 Pro：LiHei Pro Medium儷宋 Pro：LiSong Pro Light標楷體：BiauKai蘋果儷中黑：Apple LiGothic Medium蘋果儷細宋：Apple LiSung Light。
前端电子屏数字展示效果组件开发
Twinkle_sone的博客
10-02 941
电子屏数字 组件将数字转化成电子屏数字的形式展示，效果图如下： 效果图 预览地址 预览地址 组件开发 设计思路 数字的主体是一个二维数组组成的图形，通过数组中的值来控制具体块的展示形式。 //如0的本质是这样的一个二维数组 [[1,1,1], [1,0,1], [1,0,1], [1,0,1], [1,1,1]] 入参 //要转化的数字 numbers: { type: Array, default: [0,22] }, //数字主体颜色 numberColor: { typ
Android LED电子表时钟字体digital font
11-10 5240
字体效果如下图所示： 这种类型的字体样式会被一些UI设计用于Android APP中时钟显示，比如交通灯倒计时。 实现这种字体样式，先导入一个字体包：digital.ttf。这个digital.ttf文件，我已经上传，下载链接地址：http://download.csdn.net/download/zhangphil/9965392 拿到digital.ttf文件后，作为Android assets资源文件导入，如下图所示： 然后就可以使用了，我给出一个例子，重写一个TextView，Digi.
DS-DIGIT电子数字字体（附HTML引用示例）.zip
09-17
一款数码字体，类似于电子手表的字体样式，带HTML使用示例。使用时首先要引入DS-DIGIT.TTF字体文件，在HTMLcss样式添加 font-family:electronicFont;便可生效。 好像不兼容IE浏览器，谷歌使用正常
Web前端与移动开发之css字体属性.txt
07-30
1.font-family 文本的字体 选择器 { font-family: 字体1，字体2，字体3； } 各个字体之间必须用英文状态下的逗号隔开 尽量使用默认字体 以保证不同浏览器能正确显示 一般整个页面使用同一字体 写在body后面 如果字体中间有空格，用引号 多个字体之间用，分隔 2.font-size 字体大小 谷歌浏览器默认 16px 不同浏览器默认值不同 所以一般需要指定字体大小 避免浏览器之间的差异 标题标签比较特殊 需要单独指定大小 通常给body设置 3.font-weight 字体粗细 normal正常/bold粗体/bolder特粗/lighter细体/number数字加粗 无单位 实际开发中更提倡使用数字加粗 400（不加粗）等同于normal 700（加粗）等同于bold 注意这个数字后不跟单位 4.font-style 字体样式 normal正常（不倾斜）/tialic斜体 font-style主要将倾斜的标签em i改为不倾斜 5.字体的复合属性（简写方式 节约代码） body { font: font-style font-weight font-size/line-height font-family; } 不能更换顺序 属性间以空格隔开 不需设置的属性可以省略（取默认值） font-size font-family不可省略
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：246】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 用户信息管理，图书信息管理，图书类型管理，图书留言管理，论坛信息管理等
基于java的-44-17-宠物销售系统-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
web前端字体居中_css如何让文字水平居中显示？
06-03
可以使用CSS中的`text-align`属性来实现文本水平居中。 例如，如果你要让一个`div`中的文本水平居中，可以添加以下CSS样式： ```css div { text-align: center; } ``` 如果你只想让`div`中的某个文本元素居中，可以给该元素添加`text-align`属性： ```css p { text-align: center; } ``` 另外，如果你想让文本垂直居中，可以使用`line-height`属性，将其设置为和`div`元素高度相同的值即可。 ```css div { height: 100px; line-height: 100px; text-align: center; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值