vr成品网站源码在线观看,识万物扫一扫,有哪些网站有收录做红酒的商行,微商城首页amazeui学习笔记--css#xff08;基本样式3#xff09;--文字排版Typography 一、总结 1、字体#xff1a;amaze默认非 衬线字体#xff08;sans-serif#xff09; 2、引用块blockquote和定义列表#xff1a;引用块blockquote和定义列表#xff08;dl dt#xff09;注意…amazeui学习笔记--css基本样式3--文字排版Typography 一、总结 1、字体amaze默认非 衬线字体sans-serif 2、引用块blockquote和定义列表引用块blockquote和定义列表dl dt注意一下 3、样式不能正常显示拷贝过来的很多样式在博客中都不能正常显示 二、文字排版Typography 目录 字体 字体定义字体辅助 ClassWebkit 反锯齿字体相关链接元素基本样式 标题 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.../pp classam-serif.../p p classam-kai.../p p classam-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-smoothingBetter font-rendering on OSX字体相关链接 主流系统中附带的字体 List of Microsoft Windows fontsList of typefaces included with OS XCommon fonts to all versions of Windows Mac equivalentsOS XMavericks 附带的字体OS XMountain Lion 附带的字体iOS 7字体列表iOS 6字体列表Windows UI 设计文档Supported UI Fonts in Windows PhoneTypography | 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 h1h1 标题1/h1
h2h2 标题2/h2 h3h3 标题3/h3 h4h4 标题4/h4 h5h5 标题5/h5 h6h6 标题6/h6 段落 p Copy 无论走到哪里都应该记住过去都是假的回忆是一条没有尽头的路一切以往的春天都不复存在就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。 p无论走到哪里都应该记住过去都是假的回忆是一条没有尽头的路一切以往的春天都不复存在就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。/p 分隔线 hr Copy hr/ 引用 blockquote 来源放到 small 元素里面。 Copy 无论走到哪里都应该记住过去都是假的回忆是一条没有尽头的路一切以往的春天都不复存在就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。 马尔克斯 ——《百年孤独》 blockquotep无论走到哪里都应该记住过去都是假的回忆是一条没有尽头的路一切以往的春天都不复存在就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。/p small马尔克斯 ——《百年孤独》/small /blockquote 代码块 pre 更多细节查看 Code。 Copy window.addEventListener(load, function() {FastClick.attach(document.body);
}, false);prewindow.addEventListener(load, function() {FastClick.attach(document.body);
}, false);
/pre 列表 ul/ol 无序列表ul Copy 条目 #1条目 #2 条目 #1条目 #2 条目 #1条目 #2条目 #3条目 #4 ulli.../li li... ul li ul li.../li /ul /li /ul /li /ul 有序列表ol Copy 条目 #1条目 #2条目 #1条目 #2条目 #1条目 #2条目 #3条目 #4 olli.../li li... ol li ol li.../li /ol /li /ol /li /ol 定义列表 Copy 响应式网页设计自适应网页设计英语Responsive web design通常缩写为RWD是一种网页设计的技术做法该设计可使网站在多种浏览设备从桌面电脑显示器到移动电话或其他移动产品设备上阅读和导航同时减少缩放、平移和滚动。响应式网页设计RWD的元素采用 RWD 设计的网站 使用 CSS3 Media queries即一种对 media 规则的扩展以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。 dldt响应式网页设计/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 tablecaption.../caption thead tr th.../th /tr /thead tbody tr td.../td /tr /tbody tfoot tr td.../td /tr /tfoot /table 图片 img 更多样式查看 Image 组件。 Copy img classam-img-responsive srchttp://s.amazeui.org/media/i/demos/bing-1.jpg alt/ 其他元素 元素基本样式a这是一个超链接em我在 em 元素里strongstrong 元素壮吧code行内代码del在我的胸口划一刀ins强势插入的元素mark我被贴上 mark 标签了q我在 q 元素里面 q 元素里面的 q元素 q 元素abbr响应式设计缩写 RWDdfn定义一个东西 DLNAsmall我比别人小一些转载于:https://www.cnblogs.com/Renyi-Fan/p/9006060.html
