html css怎么连在一起,CSS秘密花园:连体字母_html/css_WEB-ITnose
《 CSS Secrets 》是 @Lea Verou 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。
和人一样,不是所有的字形放在一起的时候都可以显得很自然。例如,对于大多数衬线字体的 f 和 i 而言。字母 i 上边的小点经常和 f 中的横线重叠,使得它们的组合看起来非常笨拙。
为了解决这个问题,类型设计师经常会在他们的字体中添加额外的字符,称为连字符。这些都是单独设计的字形的二联体或三联体,用于排版方案中当对应的字符彼此相邻时。例如,如上图中的一些常见的连体字母,它们看起来比之前对应字符单独放在一起的时候好了很多。
还有一些所谓的自由连体字“discretionary ligatures”:
事实上,对于不起眼的 & 符号,我们都知道并且喜欢把它作为字母 e 和字母 t 的连写(“et”在拉丁文中表示“and”)。
它被设计成一个另类的风格,而不是因为它们的等价字符对相邻时出了问题。
但是,浏览器从来不会默认使用自由连体字(尽管这是正确的),并往往不会使用常见的连字体(这是一个bug)。事实上,直到最近,显式使用任何连写字的唯一方法就是使用它的等效Unicode字符——如, fi 表示 fi 连写。这种方法比解决问题带来了更大的麻烦: 很明显,它使得这些标签很难被阅读,也很难编写(能知道 define 是什么意思纯属运气)。
如果当前字体不包含这个连写字符,结果将是乱七八糟的(如下图所示)。
不是每个连写字都有一个等同的、标准的Unicode字符。例如, ct 连写字不对应任何的Unicode字符,所有包括它的字体都需要把它放置在Unicode PUA(私人使用区域)块中。
它会打破文本的可访问性,如复制/粘贴,搜索,和语音转换。很多应用都可以非常智能地处理这些,都不是所有都可以。它甚至可以打破一些浏览器的搜索。
所以,在这种时候,总需要一个更好的方法,对吧?
解决方案
在 CSS3 的中, font-variant 可以被转换成 shorthand ,包含了很多新的 longhand 属性。其中之一是 font-variant-ligatures ,特别为连写的开启和关闭而设计的。要打开所有可能的连写字,你需要使用三个标识符: font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
该属性是可继承的。你可能会发现自由连体字“discretionary ligatures”妨碍可读性,想要把它们关掉。在这种情况下,你可能希望只打开常用的连写字: font-variant-ligatures: common-ligatures;
你甚至可以明确地把其它两种连写字关闭: font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures;
font-variant-ligatures 还接受 none 值,就是完全把连写字关闭。不要使用 none 值,除非你知道自己设置的是什么。要把 font-variant-ligatures 重置为初始值,你需要使用 normal ,而不是 none 。
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
html css怎么连在一起,CSS秘密花园:连体字母_html/css_WEB-ITnose相关推荐
- [CSS]30种时尚的CSS网站导航条
[原文地址]:http://coolshell.cn/?p=562 我想,大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计.这些导航条基本上来说都是用CSS来做的.这里,我们将向你介绍几种 ...
- css text top,text-align属性(css中文本对齐属性)
text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
- 【CSS】【14】CSS中使用背景图像
默认情况下背景图像会自动向水平和竖直两个方向平铺,如果不希望不平铺,或者只希望沿一个方向平铺,可以使backgroud-repeat属性来控制,该属性可以取以下4种之一 repeat:沿水平和竖直两个 ...
- css php html介绍,对CSS知识的简单介绍
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
- vue 导入公共css_HTML+CSS入门 vue引入通用CSS
本篇教程介绍了HTML+CSS入门 vue引入通用CSS,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.在入口 js 文件 main.js 中引入,一些公共的样式文件 ...
- CSS Dock Menu:JS+CSS 仿苹果MAC机桌面导航菜单
所需源文件--见下方文件附件 在HTML中的<head>标签中插入如下代码: <script type="text/javascript" src="j ...
- html css web笔记,Web/HTML/CSS/的笔记
一.web基本介绍 1.Web 是 Worl wide web 的缩写,称为全球广域网,俗称www 2.我们可以将Web理解为当前的一种互利网,对于我们来说更多的就是网站服务. 3.网站我们可以认为是 ...
- 怎么在css中加横线分层,CSS分层
为什么要分层? SMACSS BEM SUIT ACSS 原因 CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理 大量的样式,覆盖.权重和很多!importa ...
最新文章
- 你还在为文件读写而烦恼?Python已经轻松帮你解决了(建议收藏)
- Linux字符编码转换 UTF8转GB3212
- Mybatis源码分析之(三)mapper接口底层原理(为什么不用写方法体就能访问到数据库)
- 推荐几篇开源论文,包含人脸、目标检测跟踪、分割、去噪、超分辨率等
- JavaScript学习笔记(二)--流程控制语句
- 电商设计师必备素材|快速组合自己想要的场景和落版文字
- react給變量賦值并列元素
- SSH学习(一)—— 基础概念篇
- 手机端连线题html5,基于Canvas的html5连线题
- 图像基本处理(灰度化)
- 360路由器v2刷第三方固件_斐讯K2P MTK版简单几步刷入breed教程,附刷第三方固件方法...
- python魔法方法指南_2011年最热门的20种方法指南
- 在计算机系统中对文件执行彻底删除,怎么让电脑删除文件时可以直接彻底进行删除...
- 续编-联想原装系统OEM系统联想出厂系统联想原装系统Lenovo ThinkPad ThinkBook出厂预装系统原厂系统
- Android加载本地大Bitmap文件,解析出来的Bitmap是整张图片是黑色的
- python读取pdf内容转word_【python】python实现PDF转word
- commit 提交规范
- Jackson JsonGenerator类
- 孙陶然:三段式工作法是非常有效的聪明工作方法
- 小学计算机老师师德师风演讲稿,小学教师师德师风的演讲稿(精选5篇)
热门文章
- linux vnc 改端口号,基于Linux中vnc配置端口号的修改方法
- mfc mysql 选择删除文件_MFC应用实例:[60]删除指定类型的文件
- linux bc命令全称,Linux bc 命令
- 手持巡检仪_专业的三防产品设计-电力巡检仪设计
- Win7系统电脑修改不了文件属性怎么办
- php 如何模拟浏览器,利用php的curl扩展进行模拟浏览器访问网页
- Maven 建立父子项目和跨项目调用内容的步骤
- Bugzilla 使用指南
- java线程初始方法三种_Java 多线程 三种实现方式
- 输出有样式的php,PHP导出带样式的Excel