余姚網(wǎng)站建設(shè)：設(shè)置網(wǎng)頁文字為一個基線網(wǎng)格
發(fā)布日期: 2019-3-4 10:02:39 點擊量: 1195
網(wǎng)頁設(shè)計本質(zhì)上是印刷設(shè)計發(fā)展過程中原理的進(jìn)化和理論的創(chuàng)造。 傳統(tǒng)的設(shè)計行業(yè)為網(wǎng)頁設(shè)計帶來了很多技術(shù)與理念，但這些在虛擬環(huán)境中需要花費更多的時間才能掌握。 更不幸的是，我們沒有一個單一的平臺來展示我們的內(nèi)容；我們必須與多個瀏覽器、操作系統(tǒng)和屏幕尺寸作斗爭。
慈溪網(wǎng)站建設(shè)
隨著網(wǎng)頁設(shè)計的發(fā)展，我們也觀察到了一些設(shè)計原則。 基于網(wǎng)格的設(shè)計近年來有所增加，這些設(shè)計師可以根據(jù)列網(wǎng)格來布局他們的網(wǎng)站。余姚網(wǎng)站建設(shè)。網(wǎng)格系統(tǒng)成為一個非常流行的布局方式，通過使用比例和平衡來組織和對齊元素，并向頁面添加秩序。
基于我們使用比例和平衡的知識，可以利用另一種印刷設(shè)計理念：基線網(wǎng)格。
什么是一個基線網(wǎng)格？
基線網(wǎng)格是一種用于改善基于網(wǎng)頁排版的技術(shù)。 本質(zhì)上，它將所有文本對齊到垂直方向上的網(wǎng)格（簡稱垂直網(wǎng)格，可以理解為一行），每個字母的底部都位于網(wǎng)格上，就像在劃線紙上書寫。 寧波網(wǎng)站建設(shè)。最終的結(jié)果是：通過潛意識的平衡以及一致性，使頁面上的文本達(dá)到完美的組織。
正如我之前所說，印刷是一種靜態(tài)媒介。 為打印格式而設(shè)計時，允許你在你的觀察窗口（例如PS、AI等設(shè)計軟件上的畫布）上設(shè)定最終的呈現(xiàn)效果。 然而，由于你的設(shè)計可以通過網(wǎng)頁在各種可選的平臺上進(jìn)行解析，對于使用不同設(shè)備或者平臺的用戶，CSS渲染你的行高值和其他印刷值也將會有所不同。 對于許多設(shè)計師來說，這只能通過猜測和預(yù)測最后呈現(xiàn)在用戶面前的樣式。
在印刷中的基線網(wǎng)格-慈溪網(wǎng)絡(luò)公司
許多印刷設(shè)計師通過結(jié)合他們的設(shè)計工具來使用基線網(wǎng)格，比如說InDesign、PS和AI等等。 印刷中的網(wǎng)格可以追溯到早期的1200年代。 事實上，從網(wǎng)格到黃金比例（即大多數(shù)基于數(shù)學(xué)的理論）的一切都可以在生活中隨處可見，最突出的是建筑。
網(wǎng)格使得可以將所有的設(shè)計元素（文字、攝影、繪畫和顏色）彼此之間構(gòu)成形式上的關(guān)系；也就是說，網(wǎng)格系統(tǒng)在設(shè)計中是一個引入秩序的手段。 有意地對元素進(jìn)行組合比起對元素隨機(jī)地布局更具有清晰、整潔和成功的效果。 -- Josef Müller Brockmann。
創(chuàng)建一個基線網(wǎng)格-余姚網(wǎng)絡(luò)公司
現(xiàn)在，讓我們來看一下在實際操作中，如何創(chuàng)建一個基線網(wǎng)格。
首先，我們必須基于與字體大小的比率來定義基線網(wǎng)格的行高（line-height）。舉個例子，1:1.5是一個不錯的數(shù)值，為我們提供了一個50%的呼吸空間。 如果文字尺寸為12px，那么行高（使用1:1.5這個比例來計算）將會是18px。 150%是一個不錯的數(shù)值，為我們的設(shè)計提供了易讀性，當(dāng)然，這個數(shù)值不是固定的，你可以取任何合適的數(shù)值。寧波網(wǎng)絡(luò)公司。 但是，當(dāng)考慮行高時，你應(yīng)該盡可能選取130%-160%范圍的比率（對于西文來說是這樣的，對于中文，行高可大于這個數(shù)值）。
在我們再進(jìn)一步之前，你應(yīng)該了解 CSS line-height 實際上是如何工作的。 line-height是文本行的整體高度，而不是文本本身。 它的工作原理是通過在文本上方和下方添加填充，以使其空間化（可以理解為上下留白）。慈溪微信營銷。 如果我們實際上拿一些文本并為其設(shè)置一個背景，我們將會看到文本位于行中間，而不是完全覆蓋在行上方。
