整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：在B端設計中，字體是其中重要的組成部分。在設計字體需要考慮許多問題，比如字體的布局、樣式等等。本篇文章中，作者詳細介紹B端設計中如何正確設計字體，快來學習一下吧。
在B端設計當中，字體往往是出現頻率最高的一個“原子”。因其擁有不同的渲染方式（設計軟件渲染與瀏覽器渲染）并且在Web設計當中，會出現兩大桌面操作系統的情況（Windows 與 Mac OS）也就造成在B端設計當中的字體，往往存在著許多“變數”。
而在查看很多設計師的稿件過后，會發現他們往往存在許多頁面問題：缺少層級、頁面發灰。
缺少視覺層級，這往往是作為一個設計師的主觀感受。
在課上，我有和大家聊過：作為一名B端設計師，其實我們更像一個版式設計師。因為在移動端到桌面端，交互面積增大的同時，也會帶來信息區域的劃分，視覺動線的引導。
而缺少層級往往就像我們去尋找出口時，遇到了讓人迷惑的“標識引導系統”，在一個版式上為你平鋪密密麻麻展示所有信息。所以說設計本身，其實也是相通的。
頁面發灰一詞其實源于“美術專業”，通常用于評價一副美術作品缺乏 重色或者重色比例過低，你也可以理解為頁面當中往往找不到重點。因此頁面發灰往往是字體重色缺失所導。
字體Family，也叫做字體回退。是瀏覽器常見的字體CSS屬性。
其目的是保證字體在不同的平臺及瀏覽器內，都有著良好的適應性和可讀性。
現實情況是因為作為我們作為B端產品提供方，不知道真實用戶究竟在電腦中安裝了哪些字體，而通過字體回退，來保證頁面顯示的最佳效果。
字體Family是需要在項目之初就能有所明確，因為字體最為B端頁面當中最基礎/底層 的原子，如果隨意變化，全局的設計方案都會受到波及，因此風險較大。
顯然這些字體不是一成不變，你可以根據實際用戶的情況進行相應調整：
字號與行高是一對綁定的關系。
對于字號，瀏覽器一直都有一個最小限制，為了保證用戶的閱讀，字體的最小字號為12px。
在實際項目中，我們會設定有：12px、14px、16px、18px……等高度，而行高會是字體的1.5-1.6倍，因此我將常見的字體與行高做了一份表格。
最后我們再說說，行高在B端項目當中的重要性。這是一位同學問我的問題，大家可以想想究竟是藍色還是黃色？
正確答案是黃色。因為行高的出現，他代表著文字有著更為統一的高度，并且在實際間距的測量中，必須把行高算為字體內部的元素當中。
字體字重分別有ExtraLight、Light、 Normal、Regular、Medium、Bold和Heavy，當然它還有一個數字名稱：100、200、300、400、500……
我們可以通過字重來改變頁面層級。因為字體越粗，代表閱讀視線更加注意，整個信息層級會發生較大變化。而粗字體通常表示我們的標題，也就意味著你的標題是概括下面的所有信息內容。因此通過良好的字重管理，能夠幫助我們進行信息層級的區分。
字體灰色的色階會直接影響頁面是否發灰，我們先來看看頁面發灰的頁面所存在的問題。
雖然“發灰”是一種我們設計師的主觀感受，但是想要深究其中的邏輯，我們可以通過WCAG規范當中找到更為合適的解答。
這里我們將常見的中性色進行平鋪，可以根據HSB色值當中的明度得出一個折線圖，因為字體使用往往都在后三個色階，顏色的色值走向也相對更陡。
色階相對更陡的邏輯其實都是源于中性色的使用場景。淺灰色部分主要是以「背景區分、分割線、輸入框描邊」為主，通過淺灰色來實現對于頁面布局的關系。
深灰色則主要用于「文字、標題、正文排版」它需要拉開明度的變化來引導視覺關系，進而營造界面的整體層次感。
而對于淺灰色與深灰色，行業當中往往存在著一種說法，即「字體灰色可以通過透明度進行控制變化，比如使用 #000 然后將透明度進行隨意降低增加」。
當我深究這個問題，發現好像在各大系統當中都會存在這樣說法，這真的對嗎？
通過查看 SAP、Lightning、Ant Design、Element、Clarity Design 等設計規范，對比發現這種說法主要源自 國內 Clarity Design 與 Ant Design 兩家，不清楚規范的小伙伴可以查閱 B端設計指北 (youthce.com)。
Clarity Design 確實有描述關于字體透明度的問題的一段話：
“我們使用透明度來區分字體層級。當字體應用于淺色背景時，以 #000 為基礎來調整透明度；當應用于深色背景時，以 #FFF 為基礎。”
仔細閱讀可以理解到其核心在于表達字體層級關系，讓大家能夠快速理解層級的概念而并非教唆大家使用透明度進行字體的使用。
我們再看 Ant Design ，如果只看配圖，好像表達的含義確實是通過透明度控制文本顏色和背景顏色 之間的關系，但是看一下旁邊的描述文字：
“文本顏色如果和背景顏色太接近就會難以閱讀。考慮到無障礙設計的需求，我們參考了 WCAG 的標準，將正文文本、標題和背景色之間保持在了 7:1 以上的 AAA 級對比度。”
但是仔細閱讀你會發現，它也只是通過透明度表達層級關系。我去翻看了 阿里云、語雀、Teambition 等線上產品，發現他們均沒有使用透明度的方式。
那透明度究竟適用嗎？使用透明度的字體會有以下三點問題：
當字體在一個圖片或者有紋理的背景圖上，一個帶有65%透明度的字體明顯會出現字體無法控制的問題。
使用透明度進行渲染，會增加瀏覽器的負擔，而作為一個全局使用的內容，在可以不使用的情況下，便盡可能不要使用，以免增加不必要的負擔。
因為字體顏色采取透明度，本身就跳脫顏色規范的范疇當中，因此需要單獨維護一套字體 Color 的組件庫。
如果你之前有原子設計、Design Token 相關經驗，你一定會知道，顏色與字體本身就屬于兩類不同原子，因此字體顏色一般適用中性色當中的色值即可。
關于規范，我一直給同學講的是維護，這里給大家放一個關于設計系統沒有維護的小彩蛋：
其實關于字體，本身是一個特別簡單內容，但是其作為設計規范當中的基礎“原子”，在設計上還是會存在許許多多的小問題，你也可以說說，在B端設計當中遇到了什么“字體相關的坑”。
作者：CE青年，2B行業的2B設計師；公眾號：CeDesign
本文由 @CE青年 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議。
果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？
html5文檔類型聲明：<!doctype html>
html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。
<html>
<head></head>
<body></body>
</html>
在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。
head頭部有以下幾種常用標簽：
meta：主要提供有關頁面的元信息。
link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。
title：頁面標題的標簽。
script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。
1、塊級標簽。
塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端頁面顯示的效果如下圖：
常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內聯標簽。
內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：
常用的內聯標簽有：span、a、b、strong、i、em 。
3、內聯塊級標簽。
內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：
常用的內聯塊級標簽有：img、input、textarea。
4、區域標簽。
所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。
常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。
5、表單標簽。
這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：
?表單常用的標簽有：form、input、select、option、textarea 。
以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。
ont 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡寫，或將元素的字體設置為系統字體。
font-family寫法示例：
<style>
p{
font-family: "幼圓";
}
</style>
</head>
<body>
<p>19級啟嘉班</p>
</body>效果：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
