內在版式是網絡上造型文本的未來

這些年來，我們的樣式文字的變化並沒有太大變化。有許多進步可以幫助使事情變得更加靈活，例如佈局，但是就樣式而言，我們的設計中的大多數有限方面（例如文本）仍然相對不變。文本樣式尤其如此。我們為佈局的每個部分都明確地編寫代碼，以明確樣式的文本，然後為了使其響應迅速，我們編寫更多代碼以使其在每個斷點處工作。這意味著，隨著文本壓縮和擴展的不同領域，結果是在內容中斷之前的張力 - 明顯的，經驗的張力。在這些地方，內容遭受尺寸或間隔的尺寸不佳，同時受到過於復雜和脆弱的代碼的支持。

固有的版式改變了所有這些，通過從代碼本身開始以影響樣式來清除它。您沒有編寫明確的文本樣式，而是定義這些樣式如何與文本區域成比例地變化。這使您可以在更多佈局變化中使用更靈活的文本組件。它簡化了您的代碼，增加了新佈局可能性的機會。固有的排版起作用，使文本對其呈現的區域進行自我調整。與其在每個斷點上為每個組件的每個組件進行尺寸和間距的尺寸和間距，而是給出文本的說明，以響應其放置的區域。結果，內在版式使設計更加靈活，適應其放置區域，並且代碼較少。

印刷超級能力超越箝位（）

使用固有版式的結果遠遠超出了Clamp（）等工具的可能性。固有的印刷樣式將元素查詢的組件可移植性與CSS動畫的插值控制相結合，從而實現了跨容器寬度的任何值的無縫變化。該技術可以使其他CSS技術無法實現，例如隨著元素的區域的變化，可以流暢地調整可變字體設置，顏色和無單位線路高點。您還可以避免夾具（）的可訪問性陷阱，並鎖定在使用相對單元時，將瀏覽器的默認字體大小更改的默認字體大小會從與斷點的對齊中移出。

這與響應式排版有何不同？

響應式版式引用了轉換文本的視口。它通過媒體查詢，夾具（）或CSS鎖來實現此操作。儘管這些技術能夠跨屏幕尺寸對排版的顆粒狀控制，但它們缺乏控制不同組件中的版式的能力。這意味著，對於具有一系列不同尺寸的內容區域的頁面，需要使用響應式排版方法為每個區域創建新的標題樣式。

內在版式不需要所有這些。借助固有的排版，可以在所有不同內容區域中使用單個標題樣式。離散的標題樣式可以合併為一個固有的標題。這與元素查詢與媒體查詢的區別相似：使用元素查詢，可以將所有縮放信息綁定到組件，其中媒體查詢樣式始終引用視口。

內在風格的解剖結構

如果我們要採用上面的固有標題樣式並擠出其中的所有變化，則看起來如下：

在頁面的較大區域內，文本是排版更大，更大膽且更寬的。在頁面的較小區域中，文本較小，更輕且較窄。測量了標題的渲染區域，然後從這種內在標題樣式中獲取適當的切片，用於該特定標題。

您可能會注意到有關這種擠出標題樣式的形狀的幾件事。文本從較小到較大，但形狀本身俱有曲線。這種控製文本如何從一個點到另一點的縮放方式特別有用，因為屏幕變小，以確保最佳的知名度。在下面，您可以看到將相同的樣式應用於兩列文本，一組具有彎曲形狀，另一組具有線性形狀。與使用線性插值相比，在彎曲的固有示例中，文本在更多的地方更加清晰，其中文本變得太小了。

通過結合跨佈局和區域區域的插值文本樣式的能力，並塑造了這些設置的插值，內在版式使設計人員對在任何屏幕或組件大小上呈現文本的呈現方式都有前所未有的控制。

本質上的排版

TypeTura開發了一種工具，可以在CSS（我是創建者）中添加固有的排版功能。該工具可以編寫必要的印刷樣式，從而在以前沒有的情況下注入靈活性。內在樣式存儲在CSS密鑰幀中，並根據父元素的寬度進行更改。這可以使跨元素寬度的任何動畫屬性插值。要回到我們的元素查詢示例，請考慮插值元素查詢。

要設置密鑰幀，0％等於容器寬度為0px，而KeyFrame 100％是樣式覆蓋的最大容器寬度。默認情況下，此值為1600px。可以通過將類TypeTura添加到元素中，將根元素作為默認容器添加到一個元素來定義容器。除非定義新的上下文，否則將根據父上下文的寬度來設計子元素。

 @KeyFrames標題{
  0％{
    字體大小：1REM;
  }
  100％{
    字體大小：4REM；
  }
}

要將這些樣式附加到您的元素上，請使用自定義屬性-TT-鍵。現在，您可以看到您的第一個內在風格。

 @KeyFrames標題{
  0％{
    字體大小：1REM;
    線高：1.1;
  }
  100％{
    字體大小：4REM；
    線高：1;
  }
}

.headline {
  -tt-key：標題；
}

要塑造這些樣式如何擴展，請使用自定義屬性-TT-曲。該屬性接受CSS寬鬆功能和關鍵字。這使您能夠迅速提高基本字體大小或標題縮放和間距的錐度。此外，我們可以用-tt-max限制這些樣式覆蓋的範圍，以更好地符合佈局的約束以及文本的使用方式。

 @KeyFrames標題{
  0％{
    字體大小：1REM;
    線高：1.1;
  }
  100％{
    字體大小：4REM；
    線高：1;
  }
}

.headline {
  -tt-key：標題；
  -TT-MAX：600；
   -  tt-sease：易於入門；
}

下面的示例顯示，當所有文本上的所有文本都由固有的印刷樣式驅動時，您的頁面的靈活性如何；從文檔的根部和向上。文本可以從為會議室服務的監視器無縫過渡到手錶的大小 - 所有這些都沒有媒體查詢。文本樣式也可以在不同的模塊中共享；例如，頁面頂部的標題和臨時區域的標題都由相同的樣式驅動。雖然效率立即出現在任何網站上，但它們很快就會復雜化：您擁有的較大網站，這些效率越多。

查看這支筆。在其中，我添加了一個固有的樣式檢查器，因此您可以單擊每個標題，看看渲染尺寸是多少。在檢查員中，您還可以操縱內在樣式的形狀和上邊界。這使您可以開始看到TypeTura啟用的印刷樣式可能性。

內在版式是網絡上樣式的未來

將這些設計規則烘烤到您的內容中是內在設計的實踐，將這些規則烘烤到文本中是內在版式的實踐。詹·西蒙斯（Jen Simmons）創造的固有網絡設計是一個概念，其中常見的設計突變被烘烤到我們組件的結構中。與其明確說明每個內容的樣式，而是給出了內在佈局的設計約束，我們的內容對其環境做出了響應，而不是明確定義樣式。這種方法既簡化了您的代碼庫，又可以增強設計的靈活性，因為組件的說明不僅可以幫助他們響應視口。

Typetura將這種理念帶入文本樣式。由於文本組件是我們最基本的設計材料，這種材料幾乎在每個組件中都被重複使用，因此內在版式比其他方法具有顯著的優勢。設計彈性，可擴展性和代碼簡化的優勢在您的項目中更深入並延長其壽命。縮小到手錶的大小或電視的大小，而文字曾經限制了您的佈局可以到達多遠，現在它支持您的野心。

以上是內在版式是網絡上造型文本的未來的詳細內容。更多資訊請關注PHP中文網其他相關文章！