amazeui学习笔记--css（基本样式3）--文字排版Typography

amazeui学习笔记--css（基本样式3）--文字排版Typography

一、总结

1、字体：amaze默认非 衬线字体（sans-serif）

2、引用块blockquote和定义列表：引用块blockquote和定义列表（dl dt）注意一下

3、样式不能正常显示：拷贝过来的很多样式在博客中都不能正常显示 

 

 

二、文字排版Typography

目录

  • 字体
    • 字体定义
    • 字体辅助 Class
    • Webkit 反锯齿
    • 字体相关链接
  • 元素基本样式
    • 标题 <h1> - <h6>
    • 段落 <p>
    • 分隔线 <hr>
    • 引用 <blockquote>
    • 代码块 <pre>
    • 列表 ul/ol
    • 定义列表
    • 表格 <table>
    • 图片 <img>
    • 其他元素

很多设计师喜欢用英文，因为中文排版真的不太容易搞。中文字符多、不同字符的笔画差异也很大，使用英文时高大上的设计稿，替换成中文以后，可能会大打折扣。

网页设计中，针对中文排版的研究很少，没有太多现成的结论供参考。Amaze UI 只能根据一些经验，在字体设置、字号上做一些更适合中文的设置。

字体

Amaze UI 主要使用非衬线字体（sans-serif），在 <code>、<pre> 等元素上则设置了等宽字体（monospace）。

字体定义

 Copy
body {font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif; }
  • Segoe UI - Windows UI 字体（从 Windows Vista 开始使用）；
  • Helvetica Neue 是 iOS7 及 OSX 10.10 UI 字体（在部分文字垂直居中的场景有一些小问题，暂时先使用 Lucida Grande）；
  • 有些 Windows 用户安装了丽黑字体，丽黑字体在 Windows 上渲染出来很模糊，所以把微软雅黑放在苹果丽黑之前；
  • FreeSans - 包括 Ubuntu 之类的 Linux 分发版包含的字体。

字体辅助 Class

在 Amaze UI 的实践中，font-family 设置只在 Base 样式中出现了一两次。在具体项目中，我们也不建议到处设置 font-family，虽然 Amaze UI 提供了设置字体的辅助 class。

  • .am-sans-serif 非衬线字体，Amaze UI 主要使用的。
  • .am-serif 衬线字体，中文显示宋体，Amaze UI 中未使用。
  • .am-kai 数字英文显示衬线字体，中文显示楷体。和 .am-serif 的区别仅在于中文字体，Amaze UI 中把 <blockquote> 的字体设置成了 .am-kai。
  • .am-monospace 等宽字体，Amaze UI 源代码中使用。

下面为几种字体系列的演示：

 Copy

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

<p>...</p><p class="am-serif">...</p> <p class="am-kai">...</p> <p class="am-monospace">...</p>

严格来说，楷体属于手写体系列（cursive），不过英文的手写字过于花哨，所以在 .am-kai 中英文使用 serif。关于五种字体的定义，可以查看 W3C 文档。

Webkit 反锯齿

另外，在 Webkit 浏览器下还设置了反锯齿平滑渲染，渲染出来要纤细一些，其他内核的浏览器上看着稍粗一些。

2014.10.10 update: OSX 平台的 Firefox 从 v25 增加了 -moz-osx-font-smoothing，实现类似 Webkit 的字体渲染效果。

 Copy
body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

如果你不喜欢，可以重置成浏览器的默认平滑字体。

 Copy
body {-webkit-font-smoothing: subpixel-antialiased;-moz-osx-font-smoothing: auto;
}
 Copy

开启反锯齿 -webkit-font-smoothing: antialiased;

The quick brown fox jumps over the lazy dog.
千万不要因为走的太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。


未开启反锯齿 -webkit-font-smoothing: subpixel-antialiased;

The quick brown fox jumps over the lazy dog.
千万不要因为走的太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

<h3>-webkit-font-smoothing: antialiased;</h3>
<p> The quick brown fox jumps over the lazy dog. <br/> 千万不要因为走的太久，而忘记了我们为什么出发。 <br/> 千萬不要因為走得太久，而忘記了我們為什麼出發。 </p> <br/> <div style="-webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto"> <h3>-webkit-font-smoothing: subpixel-antialiased;</h3> <p> The quick brown fox jumps over the lazy dog. <br/> 千万不要因为走的太久，而忘记了我们为什么出发。 <br/> 千萬不要因為走得太久，而忘記了我們為什麼出發。 </p> </div>

参考链接：

  • -webkit-font-smoothing
  • Better font-rendering on OSX

字体相关链接

主流系统中附带的字体

  • List of Microsoft Windows fonts
  • List of typefaces included with OS X
  • Common fonts to all versions of Windows & Mac equivalents
  • OS X：Mavericks 附带的字体
  • OS X：Mountain Lion 附带的字体
  • iOS 7：字体列表
  • iOS 6：字体列表
  • Windows UI 设计文档
  • Supported UI Fonts in Windows Phone
  • Typography | Android Developers

中文排版相关开源项目

  • 「漢字標準格式」——印刷品般的漢字網頁排版框架
  • Entry.css - 可配置的、更适合阅读的中文文章样式库

元素基本样式

标题 <h1> - <h6>

<h1> - <h6> 保持粗体，设置了边距；<h1> 为正常字号的 1.5 倍；<h2> 为正常字号的 1.25 倍；其他保持正常字号。

 Copy

h1 标题1

h2 标题2

h3 标题3

h4 标题4

h5 标题5
h6 标题6
<h1>h1 标题1</h1>
<h2>h2 标题2</h2> <h3>h3 标题3</h3> <h4>h4 标题4</h4> <h5>h5 标题5</h5> <h6>h6 标题6</h6>

段落 <p>

 Copy

无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。

<p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>

分隔线 <hr>

 Copy
<hr/>

引用 <blockquote>

来源放到 <small> 元素里面。

 Copy

无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。

马尔克斯 ——《百年孤独》
<blockquote><p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p> <small>马尔克斯 ——《百年孤独》</small> </blockquote>

代码块 <pre>

更多细节查看 Code。

 Copy
window.addEventListener('load', function() {FastClick.attach(document.body);
}, false);

<pre>window.addEventListener('load', function() {FastClick.attach(document.body);
}, false);
</pre>

列表 ul/ol

无序列表（<ul>）：

 Copy
  • 条目 #1
  • 条目 #2
    • 条目 #1
    • 条目 #2
      • 条目 #1
      • 条目 #2
  • 条目 #3
  • 条目 #4
<ul><li>...</li> <li>... <ul> <li> <ul> <li>...</li> </ul> </li> </ul> </li> </ul>

有序列表（<ol>）：

 Copy
  1. 条目 #1
  2. 条目 #2
    1. 条目 #1
    2. 条目 #2
      1. 条目 #1
      2. 条目 #2
  3. 条目 #3
  4. 条目 #4
<ol><li>...</li> <li>... <ol> <li> <ol> <li>...</li> </ol> </li> </ol> </li> </ol>

定义列表

 Copy
响应式网页设计
自适应网页设计（英语：Responsive web design，通常缩写为RWD）是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
响应式网页设计（RWD）的元素
采用 RWD 设计的网站 使用 CSS3 Media queries，即一种对 @media 规则的扩展，以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。
<dl><dt>响应式网页设计</dt> <dd>自适应网页设计（英语：Responsive web design，通常缩写为RWD）是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。</dd> <dt>响应式网页设计（RWD）的元素</dt> <dd>采用 RWD 设计的网站 使用 CSS3 Media queries，即一种对 @media 规则的扩展，以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。</dd> </dl>

表格 <table>

这里只是 normalize 以后的样式，更多样式查看 Table 组件。

 Copy
表格标题
表头 #1表头 #2表头 #3
表页脚 #1表页脚 #2表页脚 #3
数据 #1数据 #2数据 #3
数据 #1数据 #2数据 #3
<table><caption>...</caption> <thead> <tr> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> </tr> </tbody> <tfoot> <tr> <td>...</td> </tr> </tfoot> </table>

图片 <img>

更多样式查看 Image 组件。

 Copy
<img class="am-img-responsive" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/>

其他元素

元素基本样式
<a>这是一个超链接
<em>我在 em 元素里
<strong>strong 元素，壮吧
<code>行内代码
<del>在我的胸口划一刀
<ins>强势插入的元素
<mark>我被贴上 mark 标签了
<q>我在 q 元素里面 q 元素里面的 q元素 q 元素
<abbr>响应式设计缩写 RWD
<dfn>定义一个东西 DLNA
<small>我比别人小一些

转载于:https://www.cnblogs.com/Renyi-Fan/p/9006060.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/390492.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

剑指 Offer 46. 把数字翻译成字符串

剑指 Offer 46. 把数字翻译成字符串

给定一个数字&#xff0c;我们按照如下规则把它翻译为字符串&#xff1a;0 翻译成 “a” &#xff0c;1 翻译成 “b”&#xff0c;……&#xff0c;11 翻译成 “l”&#xff0c;……&#xff0c;25 翻译成 “z”。一个数字可能有多个翻译。请编程实现一个函数&#xff0c;用来计…
阅读更多...
Zend Guard 7 ， Zend Guard Loader处理PHP加密

Zend Guard 7 ， Zend Guard Loader处理PHP加密

环境&#xff1a;使用Zend Guard 7 软件加密。 PHP 5.6 LNMP 一键安装&#xff0c;PHP5.6Zend Guard Loader &#xff08;对应的版本文件&#xff09;是已经安装好了&#xff0c;还要安装 opcache.so ,直接在lnmp 安装教程中有。因为自动安装 的 版本并不对应&#xff0c;于…
阅读更多...
qr码是二维码码_如何使用QR码进行有效的营销和推广

qr码是二维码码_如何使用QR码进行有效的营销和推广

qr码是二维码码Efficient means doing things right. Effective is about doing the right things.高效意味着做正确的事。 有效就是做正确的事。 I am an advocate for efficiency and effectiveness. There must be a more efficient way to share contact details other th…
阅读更多...
ELK学习记录三 ：elasticsearch、logstash及kibana的安装与配置(windows)

ELK学习记录三 ：elasticsearch、logstash及kibana的安装与配置(windows)

注意事项&#xff1a; 1.ELK版本要求5.X以上 2.Elasticsearch5.x版本必须基于jdk1.8&#xff0c;安装环境必须使用jdk1.8 3.操作系统windows10作为测试环境&#xff0c;其他环境命令有差异&#xff0c;请注意 4.本教程适合完全离线安装 5.windows版本ELK安装包下载路径&#xf…
阅读更多...
【quickhybrid】JSBridge的实现

【quickhybrid】JSBridge的实现

前言 本文介绍quick hybrid框架的核心JSBridge的实现 由于在最新版本中&#xff0c;已经没有考虑iOS7等低版本&#xff0c;因此在选用方案时没有采用url scheme方式&#xff0c;而是直接基于WKWebView实现 交互原理 具体H5和Native的交互原理可以参考前文的H5和Native交互原理 …
阅读更多...
mongodb atlas_如何使用MongoDB Atlas将MERN应用程序部署到Heroku

mongodb atlas_如何使用MongoDB Atlas将MERN应用程序部署到Heroku

mongodb atlas简介 (Introduction to MERN) In this article, well be building and deploying an application built with the MERN stack to Heroku.在本文中&#xff0c;我们将构建和部署使用MERN堆栈构建的应用程序到Heroku。 MERN, which stands for MongoDB, Express, R…
阅读更多...
面试题 10.02. 变位词组

面试题 10.02. 变位词组

编写一种方法&#xff0c;对字符串数组进行排序&#xff0c;将所有变位词组合在一起。变位词是指字母相同&#xff0c;但排列不同的字符串。 注意&#xff1a;本题相对原题稍作修改 示例: 输入: [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”], 输出: [ [“ate”,…
阅读更多...
智能合约设计模式

智能合约设计模式

2019独角兽企业重金招聘Python工程师标准>>> 设计模式是许多开发场景中的首选解决方案&#xff0c;本文将介绍五种经典的智能合约设计模式并给出以太坊solidity实现代码&#xff1a;自毁合约、工厂合约、名称注册表、映射表迭代器和提款模式。 1、自毁合约 合约自毁…
阅读更多...
如何使用1Password，Authy和Privacy.com外包您的在线安全性

如何使用1Password，Authy和Privacy.com外包您的在线安全性

Take some work off your plate while beefing up security with three changes you can make today.通过今天可以进行的三项更改来增强安全性&#xff0c;同时省下一些工作。 Unstable times are insecure times, and we’ve already got enough going on to deal with. When…
阅读更多...
「CodePlus 2017 12 月赛」火锅盛宴

「CodePlus 2017 12 月赛」火锅盛宴

n<100000种食物&#xff0c;给每个食物煮熟时间&#xff0c;有q<500000个操作&#xff1a;在某时刻插入某个食物&#xff1b;查询熟食中编号最小的并删除之&#xff1b;查询是否有编号为id的食物&#xff0c;如果有查询是否有编号为id的熟食&#xff0c;如果有熟食删除之…
阅读更多...
5815. 扣分后的最大得分

5815. 扣分后的最大得分

给你一个 m x n 的整数矩阵 points &#xff08;下标从 0 开始&#xff09;。一开始你的得分为 0 &#xff0c;你想最大化从矩阵中得到的分数。 你的得分方式为&#xff1a;每一行 中选取一个格子&#xff0c;选中坐标为 (r, c) 的格子会给你的总得分 增加 points[r][c] 。 然…
阅读更多...
您有一个上云锦囊尚未领取！

您有一个上云锦囊尚未领取！

前期&#xff0c;我们通过文章《确认过眼神&#xff1f;上云之路需要遇上对的人&#xff01;》向大家详细介绍了阿里云咨询与设计场景下的五款专家服务产品&#xff0c;企业可以通过这些专家服务产品解决了上云前的痛点。那么&#xff0c;当完成上云前的可行性评估与方案设计后…
阅读更多...
怎么从运营转到前端开发_我如何在16个月内从销售人员转到前端开发人员

怎么从运营转到前端开发_我如何在16个月内从销售人员转到前端开发人员

怎么从运营转到前端开发On August 18, 2015, I was on a one-way flight headed to Copenhagen from Toronto Pearson Airport. I was starting my two semester exchange at the Copenhagen Business school. 2015年8月18日&#xff0c;我乘坐单程飞机从多伦多皮尔逊机场前往哥…
阅读更多...
Python os.chdir() 方法

Python os.chdir() 方法

概述 os.chdir() 方法用于改变当前工作目录到指定的路径。 语法 chdir()方法语法格式如下&#xff1a; os.chdir(path) 参数 path -- 要切换到的新路径。 返回值 如果允许访问返回 True , 否则返回False。 实例 以下实例演示了 chdir() 方法的使用&#xff1a; #!/usr/bin/pyth…
阅读更多...
oracle认证考试_Oracle云认证–通过此3小时免费课程通过考试

oracle认证考试_Oracle云认证–通过此3小时免费课程通过考试

oracle认证考试This Oracle Cloud Certification exam will take – on average – about one week of study to prepare for. Most people who seriously commit to their studies are ready to pass the exam within about four days.这项Oracle Cloud认证考试平均需要大约一…
阅读更多...
git 修改远程仓库源

git 修改远程仓库源

自己已经写好了一个项目&#xff0c;想上传到 github github 创建新项目 新建 README.md &#xff0c; LICENSE 本地项目添加 github 远程仓库源 不是git项目git remote add origin https://USERNAME:PASSWORDgithub.com/USERNAME/pro.git已是git项目&#xff0c;先删除再添加 …
阅读更多...
Docker 常用命令备忘录

Docker 常用命令备忘录

build镜像docker build -t"name" . 复制代码后台运行docker run -d -i -t 14a21c118315 /bin/bash 复制代码删除镜像docker image rmi -f 300de37c15f9 复制代码停止运行的镜像docker ps docker kill (id) 复制代码进入镜像docker attach 29f2ab8e517c(ps id) 复制…
阅读更多...
mvp最小可行产品_最低可行产品–如何为您的项目建立MVP以及为什么要这样做

mvp最小可行产品_最低可行产品–如何为您的项目建立MVP以及为什么要这样做

mvp最小可行产品具有足够功能的产品可以收集全面的定性反馈 (A product with just enough features to gather comprehensive qualitative feedback) Proof of concept, prototypes, wireframes, mockups… what actually constitutes a Minimum Viable Product (MVP)?概念验证…
阅读更多...
composer 更改为中国镜像

composer 更改为中国镜像

composer 更改为中国镜像 $ composer config -g repo.packagist composer https://packagist.phpcomposer.com 转载于:https://www.cnblogs.com/love-snow/articles/8111410.html
阅读更多...
人人都能学会的python编程教程（基础篇）完整版

人人都能学会的python编程教程（基础篇）完整版

人人都能学会的python编程教程1&#xff1a;第一行代码 人人都能学会的python编程教程2&#xff1a;数据类型和变量 人人都能学会的python编程教程3&#xff1a;字符串和编码 人人都能学会的python编程教程4&#xff1a;关系运算符与循环 人人都能学会的python编程教程5&#x…
阅读更多...
最新文章

Copyright @ 2022~2023