一個(gè)簡(jiǎn)單的響應(yīng)字體

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

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

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

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

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

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

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

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

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

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

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

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

當(dāng)前名稱：一個(gè)簡(jiǎn)單的響應(yīng)字體
網(wǎng)頁(yè)URL：http://www.muchs.cn/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è)計(jì)、微信小程序

廣告

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