如果不用印象筆記，哪款筆記軟件最有可能代替它？十分感謝邀請(qǐng)手機(jī)里面去下載了兩個(gè)筆記，印象和八方通云，個(gè)人更喜歡有道云筆記。在電腦、手機(jī)、網(wǎng)頁、平板可以使用的筆記應(yīng)用。你在不可以一個(gè)平臺(tái)編輯的內(nèi)容，都可

如果不用印象筆記，哪款筆記軟件最有可能代替它？

十分感謝邀請(qǐng)

手機(jī)里面去下載了兩個(gè)筆記，印象和八方通云，個(gè)人更喜歡有道云筆記。在電腦、手機(jī)、網(wǎng)頁、平板可以使用的筆記應(yīng)用。你在不可以一個(gè)平臺(tái)編輯的內(nèi)容，都可在其他平臺(tái)瀏覽和可以修改，還這個(gè)可以一鍵恢復(fù)收藏微博、、網(wǎng)頁等，永久保存和管理你去珍惜的內(nèi)容。

怎樣在網(wǎng)頁中做出精彩的文字排版？

字體排版絕對(duì)不單單是使用字體那你簡(jiǎn)單點(diǎn)，它和了關(guān)於文字”看起來會(huì)是好不好？”的所有事情——的或文字的大小，行高，顏色甚至還文字間留白這樣的細(xì)枝末節(jié)的小事。一個(gè)好的文字排版會(huì)為你的所寫的內(nèi)容商議好情感基調(diào)，因此也可以幫讀者更好的理解其內(nèi)容和語境。

就是為了讓你建議使用起來更像是在看一本參考書而又不是說明書，本文可以說太系統(tǒng)精簡(jiǎn)清晰，假如你想一系列的了解更多細(xì)節(jié)，可以不點(diǎn)擊查看在每一章中的”擴(kuò)展閱讀理解”去進(jìn)一步了解。

這本手冊(cè)將是在GitHub上開源軟件，而且會(huì)堅(jiān)持了更新完一些最佳實(shí)踐的范例，希望你們就是喜歡！

字體排版設(shè)計(jì)視覺層次

視覺層次是一種理念，它意在轉(zhuǎn)述頁面中的元素應(yīng)該九十條其重要性接受組織排版，盡快讀者可以不非常容易的通覽整個(gè)頁面，找到相關(guān)的內(nèi)容。一個(gè)好的視覺層次可以約束讀者在閱讀時(shí)候的視覺流向。視覺層次被應(yīng)用范圍運(yùn)用于文字排版中，它構(gòu)成了文字排版設(shè)計(jì)的理論基石。

請(qǐng)看下圖的”愛麗絲夢(mèng)游仙境”的字體排版設(shè)計(jì)，它淋漓盡致地展現(xiàn)了一個(gè)清晰的視覺層次：

然后點(diǎn)擊這里一欄網(wǎng)頁上的實(shí)際效果

視覺層次也可以被等分以下4個(gè)部分：

字體大小amp字體重量：設(shè)置字體大小和字體重量是兩種構(gòu)建視覺層次的最簡(jiǎn)單的。他們可以不很難地提醒讀者什么地方是最最重要的，引導(dǎo)讀者的目光落到這里的內(nèi)容過來。只不過是很簡(jiǎn)單地為文字另外這兩種樣式，文章的重點(diǎn)便一眼便知了。

定位：元素定位是另外的一種最終形成視覺層次的，得象上圖中，文章的標(biāo)題和作者信息置頂或星標(biāo)和橫列說了它們的重要性。

字體：實(shí)際使用有對(duì)比度的字體可以能提高相同元素之間的辨識(shí)度，最終達(dá)到構(gòu)建體系視覺層次

顏色：為不重要的文字設(shè)置不同色彩確實(shí)是一種非常簡(jiǎn)單點(diǎn)最終形成視覺層次的。然而建議使用這種的時(shí)候你必須謹(jǐn)慎，只不過顏色的濫用抗菌藥物很可能會(huì)導(dǎo)致重點(diǎn)部分辨識(shí)度的降底。

擴(kuò)大閱讀：

VisualHierarchy：HowWellDoesYourDesignCommunicate?

CreatingExcitingAndUnusualVisualHierarchies

字體排版中的格式塔原則

格式塔原則，或格式塔法則，是一種構(gòu)建感性認(rèn)知的規(guī)律。當(dāng)我們觀察這個(gè)世界的時(shí)候，我們常見會(huì)本能到，一個(gè)急切的場(chǎng)景是由多個(gè)在某些背景之上的物體所構(gòu)成的，而這些物體則是由更小的一些物體近似的，依此循環(huán)下來。

在字體排版中我們不需要理解的兩個(gè)很重要的是的格式塔原則就是”距離原則”和”相象原則”。.

距離外原則

目的是更好地掌握到元素定位的方法，所了解距離原則是很最重要的。相距原則因?yàn)椋藗儠?huì)將靠得近的物體視為有關(guān)聯(lián)的物體，則難，隔得也很遠(yuǎn)的物體很快就會(huì)被看成不屬于同類別。

然后點(diǎn)擊此處查找原圖

在字體排版設(shè)計(jì)中，”距離”指的是設(shè)置中行高、內(nèi)間距和外間距所可以制造進(jìn)去的留白空間。在兩段完全不同的段落之間應(yīng)該留有的確的并且也易區(qū)分的留白間隔，請(qǐng)看下面的例子：

特別注意啦，你覺得應(yīng)該是把內(nèi)容相關(guān)的部分都擠到一個(gè)很小的空間中去嗎？不過不是什么這樣，自由隨手的留白確實(shí)是很有用的。距離原則告訴我們，只需要為那些沒有關(guān)系的段落之間額外的另外一些更易區(qū)分的留白就可以了

相象原則

完形心理學(xué)的相象原則告訴大家，看起來很像的東西會(huì)被懷疑是一類的東西。舉個(gè)例子，假如所有可再點(diǎn)的文字被設(shè)置為天藍(lán)色，那么讀者是會(huì)如果說文章中所有天藍(lán)色的文字內(nèi)容大都這個(gè)可以再點(diǎn)的。

在字體排版中，幾乎完全一樣原則就換句話說，占據(jù)雖然功能的元素肯定在樣式上保持一致。要是兩組元素的功能有幾分相似的話，這樣的話它們也肯定看起來很像才對(duì)?；蛘?，兩篇同為博客帖子的文章肯定看起來好像很像。而反過來的，兩個(gè)功能不完全相同的元素也估計(jì)雖然不像。

擴(kuò)展閱讀：

GestaltTheoryacrossTypography amp Design PrinciplesProximity，UniformConnectednessampGoodContinuation

字體中,選擇字體

中,選擇字體是一個(gè)具有創(chuàng)造性和情感的過程。相同的字體可以不去傳達(dá)相同的情感，你可以盡情挑選兩個(gè)最合適的字體讓你的文字感情變地充沛出聲。

必須為你的文字的正文挑選兩個(gè)比較好的字體，當(dāng)你不需要配搭完全不同字體的時(shí)候，我記得要保持正文字體的變，然后把試著依據(jù)什么這個(gè)字體選擇和它相最好搭配的其他字體。

可以使用一些或者TypeTester和TypeCast這一類的工具會(huì)讓你通過字體中,選擇的時(shí)候快的那些。

從他人處完成任務(wù)靈感!FontsintoUse提供了大量的極優(yōu)秀的字體可以搭配范例。

有些字體一開始是為用作大標(biāo)題而設(shè)計(jì)的，而有些字體天生神力就只比較適合那些小屏幕，你要依據(jù)法律規(guī)定每個(gè)字體的”天性”去不使用它們。你這個(gè)可以在WebType上面找到對(duì)此相同字體而言適合的尺寸。再者TypeKit也特別注明了其上的字體是合適標(biāo)題或則是正文。

替都沒有達(dá)到最大程度上的兼容，我們個(gè)人建議可以使用上面列下的格式?；蚴牵辉谟?ttf2和woff也會(huì)支持什么大部分的現(xiàn)代瀏覽器。

你需要為每個(gè)列出去的格式需要提供一個(gè)你所選的字體文件。推薦一下可以使用Transfonter或則FontSquirrel'sWebFontGenerator，這樣你就這個(gè)可以在只有一個(gè)字體文件的情況下，將其轉(zhuǎn)換成有所不同的文件格式。

盡可能會(huì)的裝換你的字體文件。再點(diǎn)這里點(diǎn)此查看信息。

將多個(gè)同根字體文件（細(xì)體、常見、半粗體、粗體等等）擴(kuò)展成一個(gè)font-family，最好就是最好不要為每個(gè)字體都起一個(gè)新的font-family的名字。

也可以，你也這個(gè)可以通過線上字體資源服務(wù)，如GoogleFonts或者Typekit引入你想的字體。

存儲(chǔ)閱讀：

FurtherHardeningwithThe Bulletproof SyntaxFontSquirrel：How ToUseTheGenerator

打開程序字體

在你引導(dǎo)出的字體被軟件渲染出去之前，他們不需要先接受打開程序。下面是三種在運(yùn)行程序的時(shí)候肯定會(huì)發(fā)生的事情：

分解重組的字體就沒被不識(shí)別出，字體應(yīng)用了蔥切段字體。

分解重組的字體只不過被不能識(shí)別進(jìn)去但是沒有加載，他必須在下載成功之后才會(huì)被應(yīng)用。

引導(dǎo)出的字體被成功了識(shí)別并迅速應(yīng)用。

場(chǎng)景1只發(fā)生在你數(shù)次不使用一個(gè)不存在的字體，或是聲明時(shí)候的src正指向了一個(gè)壞鏈，狀況這個(gè)可以但是肯定徹底避免。隨后我們跳到場(chǎng)景3，這個(gè)正常情況在字體被正確的的緩存的時(shí)候不可能發(fā)生，都是我們知音體的。場(chǎng)景2中中有著字體程序加載的過程，字體加載正常情況是難以以免的（最起碼是在兩次只是請(qǐng)求的時(shí)候），下面是倆種處理

1.文檔樣式光芒閃爍方案（FOUT）

FOUT是指網(wǎng)頁會(huì)在可以切換到適合的網(wǎng)頁字體之前，建議使用設(shè)置或者備選字體沒顯示文字。這種情況的出現(xiàn)是只不過僅有當(dāng)HTML和CSS都被可以下載成功之后，字體跪請(qǐng)才會(huì)口中發(fā)出。那就，在HTML被會(huì)顯示進(jìn)去而字體文件也沒被徹底上網(wǎng)下載下來中間存在地著一段”空檔”時(shí)間。FOUT不算對(duì)大部分的網(wǎng)頁而言的最佳選擇，通常是其他的選擇或許更糟。如果沒有建議使用能夠得到的話，F(xiàn)OUT沒法被用戶查覺到出來。

2.決不可見文本閃爍不停方案（FOIT）

很多年前，一些古代瀏覽器就開始不使用一種新的技術(shù)來一次性處理字體運(yùn)行程序的問題—是指當(dāng)查看網(wǎng)頁器怎么檢測(cè)到字體正在讀取的時(shí)候，隱藏應(yīng)用這段字體的文字，直到字體全部直接下載完才將其沒顯示出去。但他我們應(yīng)該要盡量的避免這種做法可是這樣的做從理論上看起來還確實(shí)不錯(cuò)，可是這會(huì)卻讓那些網(wǎng)絡(luò)速度比較好差的用戶極為糟糕的體驗(yàn)。有可能會(huì)在最初的FOIT后會(huì)出現(xiàn)FOUT，最壞的結(jié)果的情況可能會(huì)是這段文字將永遠(yuǎn)無法看到了。

3.白屏方案

即在字體加載成功之前，整個(gè)網(wǎng)頁都處在決不可見的狀態(tài)，的或也這個(gè)可以需要總是顯示一個(gè)進(jìn)度條.我們只推薦當(dāng)FOUT十分嚴(yán)重影響用戶體驗(yàn)的時(shí)候在用這種方法。我們常見在一個(gè)網(wǎng)頁必須大面積沒顯示一個(gè)某個(gè)特定的字體的時(shí)候可以使用該方法，不然的話，F(xiàn)OUT總會(huì)我們的第一選擇，只不過”內(nèi)容高于一切”。白屏方案與FOIT很相象，但相對(duì)于你來說，你擁有再控制在什么時(shí)候給用戶影像展示你的內(nèi)容的自由，這種感覺會(huì)倒是更棒一些，也不是嗎？而且在FOIT方案中，絕不可以見的文本總是會(huì)給讀者給他困惑，而徹底的黑屏死機(jī)（也可以一個(gè)進(jìn)度條）會(huì)讓人很自然的覺著是一個(gè)正準(zhǔn)備運(yùn)行程序的信號(hào)。

無論你是準(zhǔn)備不使用FOUT方案或則白屏方案，我們都幫我推薦您不使用WebFontLoader這個(gè)JavaScript庫.WebFontLoader可以不讓你對(duì)@font-face略加再控制，不過你也為字體打開程序的體驗(yàn)直接添加完全控制事件。

盡量：有一個(gè)W3C字體打開程序API也會(huì)利用則是的功能，只不過它現(xiàn)在的支持不是什么挺好_

異步模式地可以使用WebFontLoader很重要，至少做才不會(huì)嚴(yán)重延誤頁面其他部位的3d渲染。

寫樣式的時(shí)候，讓你的蔥切段字體盡肯定近的西面你的求實(shí)際字體，那樣才能最大程度的減少FOUT造成的影響.點(diǎn)擊這里你城就會(huì)注意到一系列的備選字體.不使用這個(gè)工具你將很難的見到備選字體和你化入的字體的對(duì)比效果.

白屏方案

在這個(gè)例子里面，備選字體不是需要和你核心中的字體看起來很像，而且我們不會(huì)用到FOUT.依照你自己的喜好去選擇類型備選字體吧。

如果沒有你想要用一個(gè)進(jìn)度條脫離白屏，你可以可以使用Pace。這種方法在用戶體驗(yàn)上效果會(huì)好一些，特別是當(dāng)字體文件不大的時(shí)候。

儲(chǔ)存閱讀：

TypeStudy：Choosing Fallback FontsFOUT，F(xiàn)OIT，F(xiàn)OFTWeb FontOptimization

OpenType的特性

OpenType的特性這個(gè)可以被納入文字通過字體排版時(shí)的可選項(xiàng)，它們被為了起到文字的表現(xiàn)和易讀性。

p{font-kerning：normalfont-variant-ligatures：common-ligaturescontextual-moz-font-feature-settings：kern，liga，clig，calt-ms-font-feature-settings：kern，liga，clig，alt-webkit-font-feature-settings：kern，liga，clig，caltfont-feature-settings：kern，liga，clig，calt}

OpenType特性被放置于字體之中，那就相對(duì)于有所不同的字體，會(huì)有有所不同的特性，在使用這些特性之前，我們必須看看那我們的字體如何確定接受這些特性。

使用font-feature-settings來怎么激活OpenType特性.的原因目前是對(duì)這個(gè)屬性的支持不好，我們是需要在屬性之前另外前綴。

Kerningkern，ligaturesliga，contextualligaturesclig，和contextualalternativescalt這四種范圍問題于所有字體中######(譯者注：font-feature-settings這種屬性僅支持拉丁文語系的字體建議使用，并不接受中文哦！)

WebStyleGuide相對(duì)于大小

盡可能的使用總體大小。

html{font-size：100%}p{font-size：1em}@media(min-width：64em){html{font-size：112.5%}}

font-size：100%與瀏覽器的字體大小設(shè)定保持一致而又不是去覆寫它，依據(jù)大多數(shù)的瀏覽器的默認(rèn)設(shè)置，這里也這個(gè)可以用1em能用它表示16px.

轉(zhuǎn)變html的font-size會(huì)影響大到所有單位為em和rem的元素.如果沒有是這對(duì)響應(yīng)式怎么設(shè)計(jì)的網(wǎng)頁，那樣做還是也很功能多的。

用戶的選擇也很不重要，所有最好不要移動(dòng)的方向font-size：100%和1em太遠(yuǎn).

這對(duì)font-size個(gè)人建議不使用rem和em.

對(duì)此一些元素定位范圍如margin，padding等等，見意建議使用rem，em，或是%。

對(duì)此媒體查詢中尺寸我建議你不使用em.

對(duì)于一些大的標(biāo)題字或是配有圖片的字，可以不使用FitText來基于標(biāo)題的縮放。盡量以免使用vw和vh只不過現(xiàn)在的接受還不是什么很好，甚難不精確的配置，另外這對(duì)一些瀏覽器的字體和縮放可以設(shè)置當(dāng)然不全面兼容。

存儲(chǔ)閱讀：

TypeStudy：Sizing The Legible Letter Useful CSS TricksofResponsiveDesign

REMvsEM–The GreatDebate

PX，EM同問REM Media Queries?容器容器，的或一般稱包裝，指的是利用包裹三個(gè)或則多個(gè)元素的HTML元素。它將元素分組，最大限度地好些接受語義化、修飾在內(nèi)布局。

html{box-sizing：border-box}*，*：before，*：after{box-sizing：inherit}.container{max-width：67rempadding-left：1.5rempadding-way：1.5rem}

恐怖見意不使用box-sizing：border-box.直接點(diǎn)擊這里即可查看信息。

左/右內(nèi)間距與大的寬度同盟可以使用可以很容易地創(chuàng)建角色一個(gè)移動(dòng)端敵視的容器。

要為容器選擇一個(gè)比較合適的寬度，既沒法太大（因?yàn)樘蟮脑捵x者的眼睛難以聚焦）也又不能太?。ㄟ@樣的讀者的眼睛要經(jīng)常會(huì)天翼才也可以能夠看清楚）。會(huì)永遠(yuǎn)記住了，在參與網(wǎng)頁字體排版的時(shí)候，沒有一個(gè)更適合所有字體、尺寸、行距和分辨率的鐵律，你必須自己來做決定。

存儲(chǔ)閱讀：

*{Box-sizing：Border-box } FTWStackOverflow：IdealColumnWidthanyParagraphsOnline

字體大小

使用縮放比例模塊可以不好處你做出決定在你的元素上面應(yīng)用怎樣的font-size.圖像大小模塊指的是九十條其內(nèi)容安排好的一系列比較好比較合適的字體大小的數(shù)值。

比例縮放模塊的說明.然后點(diǎn)擊此處

我們是可以在編寫CSS的一開始在用比例縮放模塊，將它作為一個(gè)建議參考。

值的注意的是，盡管有所不同的字體有著差別的大寫字母高度和x字母高度，但是大多數(shù)的模塊化比例縮放工具都沒有將這些決定在內(nèi)。

在你的樣式表中，見意將你所可以使用到的縮放模塊工具的配置信息寫在注釋之中。

響應(yīng)式的縮放模塊

只不使用單獨(dú)的一個(gè)縮放模塊方案的確肯定會(huì)更適合所有分辨率的設(shè)備，為了可以解決這個(gè)問題，你是可以依據(jù)什么用戶的設(shè)備的分辨率的不同提供不同的縮放方案

直角距離

文字間的平行距離是由line-height，margin，和padding最終形成不出來的.

line-height沒有必要類似單位。比較寬的容器里面文字的行高會(huì)大一些，而那些也很較寬容器里面行高相對(duì)來說小一些會(huì)也很最合適。

為那些本身單方向的文本元素直接添加margin屬性，建議使用margin-bottom.

要不違背距離原則.

互相垂直節(jié)律

互相垂直節(jié)律是指元素之間的互相垂直不要超過要達(dá)到一致性。這點(diǎn)極其，它可以也讓讀者視覺上徹底放松的享受，給他們奇異交好的感覺。

Imagesource成立垂線節(jié)律很簡(jiǎn)單。首先，確定你在用的基礎(chǔ)垂線內(nèi)間距和基礎(chǔ)垂線外間距的數(shù)值。然后，為我的容器，文字性元素也可以其他相關(guān)元素的單方向的外邊距（或是內(nèi)邊距）應(yīng)用這個(gè)數(shù)值。如果你不需要制能制造極大的間隔的話，應(yīng)用這個(gè)數(shù)值的倍數(shù)就啦!

將基礎(chǔ)間距的數(shù)值設(shè)置成與行高是一樣的的數(shù)值，這樣的你的文字那像寫在一個(gè)條格紙上那樣的兩排，那像我們現(xiàn)代的印刷字體的設(shè)計(jì)的那樣。但他，打算文字占據(jù)直角節(jié)律不是有需要通過上面的方法來做，如果你設(shè)置了一個(gè)基礎(chǔ)間距，并且也讓其他間距都是由這個(gè)間距大幅度提升的得來的，那樣就可以了。

文字底部角點(diǎn)基線網(wǎng)格

文字底部尺寸線基線是平行節(jié)律的一個(gè)最為嚴(yán)不的實(shí)現(xiàn)。在網(wǎng)頁中，文字常見在line-height間兩端對(duì)齊.但對(duì)此會(huì)增大的文字來說會(huì)都很討厭，只不過這樣的做會(huì)導(dǎo)致在頂部和底部留有太多的空間。在比較傳統(tǒng)印刷的時(shí)候，這個(gè)問題好象會(huì)通過讓文字整個(gè)表格基線網(wǎng)格的底部絕無可能可以解決。

我們也也可以按照為減小的文字添加一個(gè)負(fù)的margin-top和一個(gè)相對(duì)大的margin-bottom，不是需要可以使用基線網(wǎng)格而可以解決這個(gè)問題。

圖片資源為不同的字體樣式、字體大小和分辨率去添加一個(gè)底部環(huán)形折彎的基線網(wǎng)格并不是什么另一個(gè)容易的，所以濃烈我建議你你使用一個(gè)字體排版基線庫或者Sassline的或MegaType.

注意一點(diǎn)，垂線節(jié)律只是一個(gè)建議，并且基線網(wǎng)格也只是想像不出來的。所以我我們不是需要在每個(gè)不使用場(chǎng)合都按照這個(gè)規(guī)律，也用不著在每個(gè)元素中都去追求像素級(jí)別的超級(jí)。

擴(kuò)充卡閱讀：

whatisVerticalRhythmanImportantTypographyPractice?

AligningtypedidbaselinethebackwayusingSASS

IsWebTypographyCompletelyBroken?

Single-direction Margin Declarations

顏色

顏色是可以太大程度上的減少視覺辨識(shí)度，是字體排版中一個(gè)重要的是的組成部分。

不要隨心所欲的看中顏色，建議可以使用顏色板，建議你使用Material Design colors和FlatUIcolors中需要提供的顏色板參與顏色選擇.

不要過度濫用抗菌藥物一個(gè)顏色，畢竟這樣會(huì)倒致辨識(shí)度的降低，同時(shí)也別在用很多已經(jīng)不同顏色的。

遵循什么幾乎一樣原則.

不建議您在用純黑#000充當(dāng)你的正文顏色，你是可以你選一個(gè)非?；业念伾?333.

有時(shí)候，在用藍(lán)色透明顏色比不使用深色會(huì)更合適一些，要是你踏入的了解，也可以再點(diǎn)這里。

以保證文字和背景有較高的對(duì)比度，你也可以可以使用這個(gè)對(duì)比度檢測(cè)工具解決你并且選擇.

####擴(kuò)展閱讀：

MagicoftheCSS：ColorGoogle Style – Color下劃線

在印刷品里，永遠(yuǎn)永遠(yuǎn)都千萬不能使用到下劃線，只不過這樣的做會(huì)影響文字的閱讀，重點(diǎn)是，它很丑！PracticalTypography

像是的來說，在網(wǎng)頁中下劃線也會(huì)感覺起來的確美好！幸運(yùn)的是，background-image就乾坤二卦一個(gè)方法，它可以以至于下劃線變得好看一點(diǎn)兒。下面是Adam Schwartz建議使用Sass實(shí)現(xiàn)方法的下劃線的例子：

SmartUnderline是三個(gè)漢字拆分這個(gè)工作的庫。建議你只在有音樂鏈接的地方建議使用下劃線，這是大部分是網(wǎng)站都按照的規(guī)律，要是不這樣做的話，很有可能會(huì)過多誤解。