CSS字體的（和潛在利益）

至少不是典型的。每個字符都是使用CSS構建的HTML元素。真正的網絡字體！

讓我詳細說明。這是一種呈現文本而無需使用任何字體的方法。隨機文本用PHP分為單詞和字母，然後呈現為HTML元素，帶有類。每個元素都使用CSS來創建角色。這是由CSS控制的“ Just” HTML，但它仍然是軟件，並且可以通過消息傳遞。它具有常規字體所具有的所有屬性，因此我們將其稱為字體。沒有格式的字體。

免責聲明：我不是HTML，CSS或PHP的專家。我願意打賭有一個快捷方式或更簡單的解決方案來實現我在這裡所做的工作，但是由於我對結果感到滿意，因此我會呈現過程和經驗。演講不是教程；這是一個基於我有限的技能的實驗，應該得到這樣的對待。

這個想法

該項目從來沒有打算持續五個月，但這就是所需要的！這一切始於使用CSS圖標玩遊戲，並使用偽元素製作形狀。一旦第一個字母完成，其餘的就相對容易了。我檢查了是否還有其他類似的項目，但沒有發現太多項目，所以我有動力看看我能走多遠。

最初，由CSS控制的SVG字體似乎是一個好主意。這將使此任務變得更加容易（SVG用於繪圖），並且可以專注於特定於設計的效果，但是它沒有原始HTML元素的靈活性。 SVG不能根據上下文進行修改，並且該過程落後於常規字體設計，每個字符都具有固定的形狀和代碼。

它如何工作

這是網絡和字體設計的混合體。每個字符都像任何網絡元素一樣構建，並用內聯行為像字體一樣行為。指標，權重，Opentype功能和所有其他字體屬性僅使用CSS文件控制。

字體設計基於元素的邊界寬度，這使其非常通用。通過豁免腳本字體，使用相同的形狀可以由邊界變化產生幾種樣式和權重。在更複雜的字符上，剪輯路徑和背景用於創建切口效果。

當pseudo元素之前的:: :: ::不足以形成角色時，就會生成嵌套的元素。使用寬度，高度和邊框寬度的EM值將有助於以後控製字體大小。這是黃金規則之一。

字符（左）的構建就像任何CSS圖標（右）一樣。沒有重大差異。有時，基於圓形和線條，就像貼紙一樣，字母更容易構建。但是，這是您真正能夠真正欣賞Border-Radius財產的角色的時候。就我個人而言，我從來都不是圓形邊界的粉絲，但是這種經歷改變了我的想法。基本上，半徑可以做什麼沒有限制。

以下是本文中CSS字體的僅有的兩個“真實”示例，其餘的示例數字將轉換為SVG，以便在博客文章中更容易顯示。

Serif預覽的情況更為複雜，但是與往常一樣，SANS字體將具有更少的元素可處理，使文件更小且負載更快。這並不是真正的問題，它只是合乎邏輯的 - 在包含 @font-face規則的字體之前，請閱讀CSS。

挑戰

最困難的部分是擊敗像素比，或將偽元素與基本形狀對齊。調整了特徵時，精心設計的數學公式失敗了。瀏覽器將分別處理每個元素，並將其轉移到最接近整數值。

一種解決方案是創建盡可能多的偽元素（甚至包括額外的元素），並使用單個參考來對一對:: forefer和::之後，與主形狀無關。在這種情況下，瀏覽器將使元素或多或少地渲染到同一位置。

下面的s字母說明了沒有參考點的字符。字母的頂部和底部是兩個偽元素，沒有依賴的基本形狀（例如，襯線中的灰色區域或數字兩個中的灰色區域）。

創建了幾百個字符後，您會意識到字符無法支持內聯轉換（即Skew（），rotate（）等），因為它不會與兄弟姐妹保持一致。在文本選擇上，這在視覺上變得更加明顯。因此，偽元素很有意義。我要說的是必不可少的：第二個黃金法則。

CSS自定義屬性

在CSS中創建樣式似乎比在字體軟件中更容易。您可以選擇一次控制多個字符的形狀和大小。在CSS中，將更多的字符分組為相同的規則集。

在這種情況下，CSS自定義屬性非常方便，尤其是用於控制邊界，寬度和位置。不同權重是變量變化的結果，此後調整。微調是不可避免的，因為字符形狀和尺寸將邊界寬度考慮到了，並且可能不會與不同邊界相稱地顯示，尤其是在不對稱形狀上。

切割效果是通過在覆蓋元素中添加相同的背景顏色，然後使用Mix-Blend模式的顏色和效果組合而創建的。

CSS中需要一個全局顏色變量為嵌套元素創建切口效果，否則將遵循父顏色（疊加元素與背景匹配）。

背景圖像屬性無法適用於專門用邊界構建的字符，如果元素具有大小或位置變換（刻度，旋轉或其他），則背景會更改。

如果無法使用背景，則解決方案是混合混合模式：亮光；在黑暗背景和混合模式上：深色；在光背景上。

副作用

缺點是，某些效果可能對具有可變屬性的元素產生意外甚至相反的結果。通常，過濾器會將元素讀為完整對象。為了防止任何衝突，邊界和轉換效應是為字體設計保留的。

文本字體

字體不會發表文字。首先，這個想法是創建一個將與CSS一起加載的文本，而無需任何依賴。為此，最好的選擇是PHP（我的新秀意見）。除了使用內聯函數渲染HTML外，幾乎可以想像到的任何任務。沒有PHP，這個項目將是不可能的。

自然，PHP的第一個任務是將隨機文本分開，刪除額外的空格並為每個單詞和字母創建匹配組，每個單詞都有自己的類。到目前為止，一切都很好。我不會堅持順利進行的部分，這是一個基本功能，使用拆分，爆炸以及從視頻遊戲中藉來的所有其他單詞。

儘管如此，由於我以前從未從事過這個問題，因此我必須學習艱難的方法。沒有人告訴我，PHP將“ 0”（零）視為無效，所以有一天消失了。我不知道為什麼不顯示我的零。

對於這個問題的人來說，這可能會有所幫助。我不使用empty（）函數，而是使用以下一個：

函數is_blank（$ value）{  
  返回空（$ value）&&！ is_numeric（$ value）;
}

另一個主要問題是角色範圍。 HTML，.HTACCESS文件以及服務器本身中的設置似乎太多，只是為了識別特殊字符。該解決方案是在PHP文檔的幾天后發現的，這是Qeremy [atta] gmail [dotta] com的發布，顯然有人居住在變節型地區。

功能str_split_unicode（$ str，$ length = 1）{
  $ tmp = preg_split（'~~ u'，$ str，-1，preg_split_no_empty）;
  如果（$ length> 1）{
    $ chunks = array_chunk（$ tmp，$ length）;
    foreach（$塊作為$ i => $塊）{
        $塊[$ i] = join（''，（array）$塊）;
    }
    $ tmp = $塊;
  }
  返回$ tmp;
}

如果您問我，很多部分，但它的工作就像魅力並解決了每個問題。該函數基本上忽略了語言設置，並且將讀取任何字符，甚至是非標準的字符。如果PHP功能包含該字符，則將掩埋在Unicode表中的字符將被識別。

此函數只會創建可能生成每個字符作為鍵入的可能性，而無需HTML實體。此選項不會限制以HTML格式使用文本，但是必須避免或替換為替代方案。例如，可以將元素包裹在標籤中，而不是使用非破壞空間（＆nbsp;）。

結構

通過解決這個問題，下一步是為每個字符創建一個特定的結構。 HTML元素的類和嵌套元素的位置取決於與一個或多個類相對應的長字符列表。其中一些最基本的字符不排除在此列表之外（例如，小“ A”字母需要終止，這意味著額外的元素/類）。

基本結構看起來像這樣，只是為了理解這個想法…

 ''=>'cacute c急性'

…這將呈現三個要素：父片，c字母和急性口音。結果為下方，紅色正方形代表父元素，其中包含其他兩個預設元素。

該技術與基於配對的字體軟件中的變量（有時是連接）非常相似。當更改組件元素時，其他所有內容都會調整。

由於任何元素都可以具有多個應用程序，因此可以避免ID，並且僅使用類。

Opentype功能

根據上下文，PHP函數的行為不同。字符識別設置為替換配對並在呈現CSS文本時創建連接。

CSS文本中的上下文連接不是獨立的字符，也沒有特定的類。與常規的Opentype功能不同，字符已重新設計，未更換。通過對第二個元素進行樣式，合併或形成新字符，可以在CSS中控制交互。

用添加到父容器中的特定類激活這些功能。在任何情況下，無論是否在每個瀏覽器中註冊字符，都有或沒有字體功能支持。

HTML語法

任何HTML元素都可以包含CSS字體，只要它在字體的重量旁邊都具有.CSS類。要選擇一個重量，使用.-示例，.light，.gular或.bold類，例如

（<pre class="brush:php;toolbar:false">標籤只是避免任何樣式乾擾的安全措施）。<p>文本可以具有HTML格式。純文本不是強制性的。</p><p> PHP將忽略一個括號（</p><p>同樣，根據佈局偏好，可以將特定標籤（例如<a>，<u>，<inin>和<del>）視為模擬和自定義其本地外觀和行為的對象。</del></inin></u></a></p><h3 id="設定">設定</h3><p>CSS文本是一組具有邊界的對象，開放尺寸和顏色處理。將顏色視為邊界色，反之亦然。 ：第一個孩子而不是：第一字母。</p><p>字體大小是在CSS文件中設置的，與任何其他字體相同，使用視口，百分比，像素，EM或REM單元。設置的像素中設置的值可與十進制值一起使用。</p><p>默認情況下，文本 - 單位和文本性屬性屬性可以工作。即使沒有文本內容，文本也將與任何設置保持一致。</p><p>塊級元素（例如</p><div>，<p>，</p>
<ol>）放置在文本內部，將導致換行符，因為它通常會導致。 <br>標籤按預期工作。<p>除文本格式化元素（例如</p>
<h1>  -  <h6>，<strong>，<em>，<em>，<small>，<sup>，<sub>等），這些元素需要新規則才能對文本產生正確的效果，大多數語義元素（例如，大多數語義元素（例如，<form>，<ol>，<ol>，<li>）可用於其自定義設置。<h3 id="字體">字體</h3>
<p>為了在動態內容中測試字體，在JavaScript中復制了PHP功能的一部分，粘貼，鼠標事件，插入位置和文本選擇。現在，一個擊鍵使一切都值得。</p>
<p> CSS字體和互補圖標。這是實際開始的事情！</p>
<h3 id="審查-柱子-與份額">審查！柱子（）與份額（ - ）</h3>
<h4 id="即時負載">即時負載</h4>
<p>在沒有實際文本的情況下，瀏覽器不會等待字體和腳本渲染頁面。 CSS文件以及HTML元素被緩存，這意味著更快的負載。</p>
<h4 id="普遍的">普遍的</h4>
<p>每個瀏覽器和服務器都識別CSS。在每個瀏覽器中找到合適的格式的煩惱更少。服務器將不會檢查特定格式以允許訪問。</p>
<h4 id="沒有依賴性">沒有依賴性</h4>
<p>CSS字體不需要備用或系統字體即可顯示文本。頁面樣式的同一CS可以包含字體。瀏覽器不會在頁面加載之前和之後顯示默認字體。該字體不依賴於第三方和腳本，並且在具有禁用腳本的瀏覽器上設計並不差異。</p>
<h4 id="沒有嵌入">沒有嵌入</h4>
<p>CSS字體已完全集成到一個網頁中，並適應佈局而無需更換負載上的其他元素。每個頁面屬性都對文本有效，這將顯示其預期的方式，而無需效果或功能問題。</p>
<h4 id="選擇性使用">選擇性使用</h4>
<p>字體可以簡化為有限數量的字符。例如，如果佈局具有單個單詞或符號，則不需要完整版。</p>
<h4 id="完全安全">完全安全</h4>
<p>頁面上不存在實際文本，這意味著可以輕鬆地顯示敏感信息，而不必擔心垃圾郵件或網絡釣魚。</p>
<h4 id="SEO友好"> SEO友好</h4>
<p>可以使用TAG屬性包括重要信息，就像Alt屬性適用於圖像一樣。</p>
<h4 id="可自定義">可自定義</h4>
<p>為了構建複雜的字符或功能，該字體均可為任何HTML元素打開。無需腳本即可獲取特定的細節，因為每個單詞和字母都有自己的實體，並且可以單獨進行樣式。</p>
<h4 id="上下文">上下文</h4>
<p>字體設計不僅限於預定義的字符，因此該樣式可以根據上下文改變而不創建新字符。</p>
<h4 id="持續的">持續的</h4>
<p>為了彌補字體軟件中缺乏自動化，在CSS中，設計可以一次控制幾個元素。該參數是有效的，因為字體軟件可與現有內容一起使用，而CSS可以使用屬性，為每個現有或將來的元素創建模板。</p>
<h4 id="民眾">民眾</h4>
<p>任何人都可以創建自己的字體。短文可以手動渲染，並且PHP功能不是必需的。</p>
<h4 id="基本的">基本的</h4>
<p>任何文本編輯器或開發人員工具都可以訪問該設計。使用邊界寬度，邊界半徑，形狀和大小的基本技能足以重新設計任何角色。</p>
<h4 id="居住">居住</h4>
<p>每個調整結果都是即時的。從過程中消除了轉換，導出，上傳或其他激活字體的步驟。</p>
<h4 id="中等用途">中等用途</h4>
<p>如果為擴展文本生成CSS字體，則頁面的速度可能會受到影響。因此，僅建議使用此技術來進行頭條，標題，摘錄和簡短的段落。</p>
<h4 id="常見的">常見的</h4>
<p>CSS字體不會從特殊治療中受益，因為對於瀏覽器而言，這只是另一個HTML元素。結果，沒有優化或Kerning支持。像素很難共享細線，並且在小尺寸的字體上可能會顯示不正確。</p>
<h4 id="硬編碼">硬編碼</h4>
<p>默認情況下，您通常的字體設置不可用（例如<strong>，<em>等）沒有效果。該功能必須在CSS文件中設置，並且需要使用不同的方法，即使用HTML元素而不是字體。</em></strong></p>
<h4 id="獨家的">獨家的</h4>
<p>這是一個WebFont，因此僅限於由CSS控制的數字媒體。除了一些位圖效果外，只能通過將文檔打印為PDF來將字體轉換為離線，該字體將CSS轉換為向量格式。</p>
<h4 id="抽象的">抽象的</h4>
<p>如果沒有獨立文件，則很難識別，測試或傳輸字體。它的作用類似於HTML顏色：它是不可見的，直到生成為止。</p>
<h4 id="不可選擇">不可選擇</h4>
<p>如果沒有額外的腳本，則無法在輸入和文本列出中選擇或使用文本。對於動態內容，該函數需要PHP中發現的整個字符識別。</p>
<h4 id="不互動">不互動</h4>
<p>最常見的顯示功能（例如排序或過濾器）將必須與類一起工作，而不是文本內容。</p>
<h4 id="不可打印">不可打印</h4>
<p>在線打印僅支持基本的CSS規則，有時忽略圖形來支持文本。印刷質量將嚴格依賴瀏覽器的功能。</p>
<h4 id="沒有可訪問性">沒有可訪問性</h4>
<p>CSS字體將調整為頁面縮放，但是字體大小和語言無法通過瀏覽器更改。<br>自定義瀏覽器功能（例如查找，讀取器）無法訪問文本內容，因為沒有。</p>
<h4 id="有限的設計">有限的設計</h4>
<p>沒有多種樣式可供選擇，設計僅限於CSS的功能。 CSS規則可能對不同的瀏覽器具有不同的含義，從而導致不一致。 CSS字體是編寫的，而不是繪製的，因此完全消除了“手工製作”概念。</p>
<h4 id="多任務">多任務</h4>
<p>您需要知道您的CSS以在字體上進行調整，反之亦然。設計過程不是自動化的，必須手動設置機器產生的某些屬性。</p>
<h4 id="沒有保護">沒有保護</h4>
<p>任何人都可以訪問設計代碼，與任何在線元素相同。該設計不能真正保護未經授權的複制和使用。</p>
<p>感謝您的閱讀！這是字體主頁。</p>
</li>
</ol>
</ol>
</form></sub></sup></small></em></em></strong>
</h6>
</h1>
</ol>
</div>

以上是CSS字體的（和潛在利益）的詳細內容。更多資訊請關注PHP中文網其他相關文章！