一個簡單的響應(yīng)字體

一個簡單的響應(yīng)字體
文章說在兩個主要領(lǐng)域的響應(yīng)式設(shè)計的絕大多數(shù)聚焦：流體，靈活的網(wǎng)格，流體，彈性圖像。他們不談?wù)撌桥虐妗?br/>然而，對于大多數(shù)網(wǎng)站的文本的內(nèi)容， 是最重要的元素。
當(dāng)然，對網(wǎng)站的圖像或視頻的主要內(nèi)容，反應(yīng)類型是有點不太重要，但仍不可忽視。
好消息是，響應(yīng)的字體也不是特別難實現(xiàn)。我們只需要花一些時間來思考如何通過我們的類型應(yīng)該回應(yīng)屏幕大小的變化，進而實現(xiàn)那些改變。

反應(yīng)型原理
但打造有效響應(yīng)字體的主要原則。首先是調(diào)整型。這意味著，不僅調(diào)整基于屏幕的尺寸類型，但這也是由用戶調(diào)整大小。
二是優(yōu)化線路長度，保持可讀性。這意味著一些屏幕，保持內(nèi)容的面積小，線路長度較短的更有意義，盡管內(nèi)容可以拉寬。

可調(diào)整大小的類型使用REMS
大多數(shù)設(shè)計師使用像素或EMS尺寸類型。EMS是一個更好的選擇，因為它們允許用戶調(diào)整他們的瀏覽器的類型。但EMS是相對于父元素，這意味著他們更復(fù)雜的使用比像素，這是唯一的復(fù)合反應(yīng)的設(shè)計有更多的大小關(guān)系來跟蹤。
REMS EMS提供一個更好的選擇。他們在一個幾乎相同的方式工作，除了一個關(guān)鍵的區(qū)別：REM的單位是相對的HTML元素，而不是個人的父元素。這使得維護你的類型更直接上漿。

REM的單位現(xiàn)在在所有主要的現(xiàn)代瀏覽器的支持，包括從版本11.6和IE9的歌劇。雖然你可能想包括早期瀏覽器的回退，有REMS他們現(xiàn)在使用足夠的支持。
因為你會用雷單位尺寸類型，確保你將重置你的HTML元，不是你的身體元。所以它看起來應(yīng)該像這樣：

當(dāng)然，這是一個簡化代碼的文章，但是給你一個起點。你可能會注意到的最小的屏幕，一個稍大的字體大小是指定的。這是因為更大的字體大小，一般都是容易在小屏幕上閱讀。
當(dāng)然，你要像你的附加規(guī)范H1元素等。我高度推薦使用這樣的工具Web字體樣本看到你真的會看的類型。
保持好的線的長度

而可調(diào)整大小的類型是一個很簡單的概念，保持適當(dāng)?shù)木€的長度跨越多個設(shè)備有點惡搞。已經(jīng)有相當(dāng)多的爭論為可讀性的好線長度是多少，但根據(jù)Baymard研究所，似乎一致的地方50、每行75個字符之間。
他們還建議使用一個固定寬度的容器，你的內(nèi)容，但失敗的響應(yīng)式設(shè)計的目的，所以我們需要做事有點不同，如果我們想保持與優(yōu)化線路長度的反應(yīng)。
首先，看看不同的屏幕尺寸你會設(shè)計并找出你應(yīng)該使用到大約50字一行，什么樣的字體。對于非常小的屏幕，你可能需要去下面每行50個字符以保持可讀的字體大小，但50應(yīng)該是一個目標(biāo)。這給了我們一個很好的起點我們的字體大小。

我們也應(yīng)該設(shè)置大寬度（或突破點）的文本內(nèi)容?？吹拇笮☆愋湍闶褂靡粋€給定的屏幕尺寸，然后確定內(nèi)容的容器的寬度時，你有大約每行75個字符。這不會是準(zhǔn)確的除非你使用等寬字體，但你應(yīng)該能夠拿出一個平均很容易。這成為我大的集裝箱的寬度。

我們說，對于一個給定的設(shè)備的默認(rèn)字體大小16px，你希望你的字體大小為20px（假設(shè)我們使用襯線字體像Droid Serif這個例子）。這意味著你可以指定類型是1.25rem。這樣的規(guī)模，你會想要一個容器寬度約675px寬。這給了我們一個平均在60字符計數(shù)，這在我們的目標(biāo)寬度是正確的。
指定容器的寬度，就用這個代碼：

現(xiàn)在，在屏幕上超過1140像素寬，你會得到你的內(nèi)容分成兩列，讓你的線的長度更可讀。
使用替換字體
一件事往往被忽視，當(dāng)談?wù)撁舾械呐虐?，是指不同的字體可能無法工作在不同的尺寸。這是特別真實的顯示字體。
這意味著你應(yīng)該避免使用這些字體設(shè)計你的反應(yīng)嗎？當(dāng)然不是。相反，只是說明你更大或更小的布局的各種元素不同的字體。
例如，一個桌面電腦的設(shè)計，你可能想要使用一種字體聯(lián)賽的腳本你的頭。但在一個較小的顯示，如iPhone，你需要讓它如此之大，它占主導(dǎo)地位的內(nèi)容，否則就很難讀。

我們所能做的就是利用聯(lián)盟的劇本更大的顯示器（iPad，桌面，等等），而切換到一個更大的規(guī)模較小的顯示身體的字體版本（如iPhone或其他智能手機）。
要做到這一點，你只需指定這樣的事情：

結(jié)論
而響應(yīng)的設(shè)計主要集中在圖像和整體布局，字體就像那些東西一樣重要。部分是，適應(yīng)和優(yōu)化響應(yīng)的設(shè)計你的字體也不是特別難的事。
你把同樣的時間和精力，你把你的其他設(shè)計元素是很重要的。保持你的文本內(nèi)容的可讀性是為游客創(chuàng)造一個好的用戶體驗的一個重要組成部分。

創(chuàng)新互聯(lián)設(shè)計文章推薦：

當(dāng)前名稱：一個簡單的響應(yīng)字體
網(wǎng)頁URL：http://www.bm7419.com/news26/21176.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站排名、標(biāo)簽優(yōu)化、App開發(fā)、品牌網(wǎng)站設(shè)計、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)