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

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

十分感謝邀請

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

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

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

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

這本手冊將是在GitHub上開源軟件，而且會堅持了更新完一些最佳實踐的范例，希望你們就是喜歡！

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

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

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

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

視覺層次也可以被等分以下4個部分：

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

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

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

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

擴大閱讀：

VisualHierarchy：HowWellDoesYourDesignCommunicate?

CreatingExcitingAndUnusualVisualHierarchies

字體排版中的格式塔原則

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

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

距離外原則

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

然后點擊此處查找原圖

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

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

相象原則

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

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

擴展閱讀：

GestaltTheoryacrossTypography amp Design PrinciplesProximity，UniformConnectednessampGoodContinuation

字體中,選擇字體

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

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

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

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

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

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

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

盡可能會的裝換你的字體文件。再點這里點此查看信息。

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

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

存儲閱讀：

FurtherHardeningwithThe Bulletproof SyntaxFontSquirrel：How ToUseTheGenerator

打開程序字體

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

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

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

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

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

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

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

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

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

3.白屏方案

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

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

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

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

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

白屏方案

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

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

儲存閱讀：

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

OpenType的特性

OpenType的特性這個可以被納入文字通過字體排版時的可選項，它們被為了起到文字的表現(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特性被放置于字體之中，那就相對于有所不同的字體，會有有所不同的特性，在使用這些特性之前，我們必須看看那我們的字體如何確定接受這些特性。

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

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

WebStyleGuide相對于大小

盡可能的使用總體大小。

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

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

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

用戶的選擇也很不重要，所有最好不要移動的方向font-size：100%和1em太遠.

這對font-size個人建議不使用rem和em.

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

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

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

存儲閱讀：

TypeStudy：Sizing The Legible Letter Useful CSS TricksofResponsiveDesign

REMvsEM–The GreatDebate

PX，EM同問REM Media Queries?容器容器，的或一般稱包裝，指的是利用包裹三個或則多個元素的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.直接點擊這里即可查看信息。

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

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

存儲閱讀：

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

字體大小

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

比例縮放模塊的說明.然后點擊此處

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

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

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

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

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

直角距離

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

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

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

要不違背距離原則.

互相垂直節(jié)律

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

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

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

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

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

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

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

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

擴充卡閱讀：

whatisVerticalRhythmanImportantTypographyPractice?

AligningtypedidbaselinethebackwayusingSASS

IsWebTypographyCompletelyBroken?

Single-direction Margin Declarations

顏色

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

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

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

遵循什么幾乎一樣原則.

不建議您在用純黑#000充當(dāng)你的正文顏色，你是可以你選一個非常灰的顏色如#333.

有時候，在用藍色透明顏色比不使用深色會更合適一些，要是你踏入的了解，也可以再點這里。

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

####擴展閱讀：

MagicoftheCSS：ColorGoogle Style – Color下劃線

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

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

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