Font

font-family(字体原理)

  • 使用浏览器打开页面时,浏览器会读取 HTML 文件进行解析渲染。当读到文字时会转换成对应的 unicode码(可以认为是世界上任意一种文字的特定编号)。再根据HTML 里设置的 font-family (如果没设置则使用浏览器默认设置)去查找电脑里(如果有自定义字体@font-face ,则加载对应字体文件)对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形,找到后绘制到页面上

  • 在 CSS 中设置字体时,直接写字体中文或英文名称浏览器都能识别,直接写中文的情况下编码(GB2312、UTF-8 等)不匹配时会产生乱码。保险的方式是将字体名称用Unicode来表示
    宋体 | SimSun | \5B8B\4F53 黑体 | SimHei | \9ED1\4F53 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1

  • 查询unicode编码:打开控制台 escape('微软雅黑'),把 %u替换成 \

字体图标的实现原理

chrome最小字体解决方案

文本

  • text-align:文本对其方式 left、center、right、justify
  • text-indent:文案第一行缩进距离
  • text-decoration: none、underline、line-through、overline
  • color:文字颜色
  • text-transform:改变文字大小写none、uppercase、lowercase、capitalize
  • word-spacing:可以改变字(单词)之间的标准间隔
  • letter-spacing:字母间隔修改的是字符或字母之间的间隔
范例
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,839评论 1 92
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,065评论 1 4
  • 对于字体的认识一直有一个误区:我们可能一直认为font-family是某一种字体,实际上,它指的是一个字体的系列。...
    SuperSnail阅读 3,565评论 6 32
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,102评论 0 1
  • 摘要:本篇文章包括(1)介绍@font-face(2)如何在网页中使用@font-face插入特殊字体(3)中文在...
    Masukio阅读 16,605评论 0 17