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.pswp.cn/news/390492.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/390492.shtml
英文地址，請注明出處：http://en.pswp.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