FontFonter.com:隨意調換網頁的字體

2020-11-26 TechWeb

　　FontFonter.com：隨意調換網頁的字體

不知道當你成天看到網頁字體清一色的宋體、黑體或微軟雅黑的時候，有沒有一種疲倦的感覺?或許你已經習慣地毫無感覺，但當不同字體有明顯對比的時候，你會發現在看什麼網頁時、期待什麼樣的字體?今天所介紹的網站FontFonter.com(http://fontfonter.com/)所要做的就是讓用戶可以隨時隨地地調換任何網頁的字體，體現一種變化的感覺，所謂「Try All The Fonts That You Want」。

網站名稱：FontFonter.com(http://fontfonter.com/)

上線時間：2010年7月

網站地點：美國加州(San Francisco, California)

FontFonter.com網站由知名字體(Font)服務平臺FontShop.com開發設計，他們致力於提供專業化的字體服務，讓網際網路體驗及感官更為美妙。其使用非常簡單，用戶輸入自己所要訪問網站的地址，比如「tech.163.com」，然後點擊「FontFontit」，會跳轉到如上圖所示的新頁面，然後根據FontFonter.com所提供的字體樣式進行選擇即可。

　　以網易科技頁面為例展現FontFonter的功能

在FontFonter.com上調換字體的時候，用戶既可以選擇全部頁面，也可以選擇部分頁面。該網站希望這樣的方式讓用戶選擇最適合看某個網頁的字體，尤其對於美工而言，沒有必要修改代碼一一調換，直接通過FontFonter.com查看各種字體效果後，進行統一替換。

從技術的角度來看，FontFonter.com事實上就是提供了一些定製化的CSS模板，用戶選擇不同的CSS後，即可替換並生成新的網頁。在個性化的浪潮下，FontFonter.com從字體角度為用戶提供非同一般的感覺。

當然，目前FontFonter.com還有一些局限性，比如FontFonter.com目前還不支持JavaScript, cookies和Internet Explorer瀏覽器;此外FontFonter.com並非適用所用網頁，比如就不支持中文網頁，或者說還沒有專門針對中文網頁提供字體解決方案和 CSS。(文飛翔)

相關焦點

  • 深談網頁設計中的字體應用Font Set
    最近有不少人都提及了網頁上該如何選擇字體的問題。問題雖然小，但是卻是前端開發中的基本，因為目前的網頁，還是以文字信息為主，而字體，作為文字表現形式的最重要參數之一，自然有著相當重要的地位。Hihi, 大家好~ 最近有不少人都提及了網頁上該如何選擇字體的問題。
  • 網頁設計開發如何處理網頁字體
    在網頁設計開發過程中，最重要的莫過於網頁的視覺效果，設計人員經常花費大量精力用於調整字體和字號。利用CSS2規範，我們可以在Web頁面或應用程式中隨意對字體進行調整。本文將深入探討字體大小，並介紹在網頁和網頁應用程式中調整字體的最佳方法。
  • Google網頁字體在線服務 設計師的福音
    目前網頁上使用的字體都是常見的幾種，如』Lucida Grande』， Verdana， Arial， Sans-Serif，中文常見的有宋體。要想用比較個性的字體就比較麻煩了，因為你不能保證客戶端是否支持這種字體，常用的方法是用Photoshop把文字製作成圖片。
  • CSS教程:網頁字體及字體大小的設計
    字體大小CSS2規範根據長度——水平和垂直尺寸——來定義字體。這個長度為一個數值，前面可能帶一個可選的加(+)或減(-)標記符。另外，該數值後可能有一個可選的單位標識符。另外，CSS2規範定義了兩個單位類型:絕對單位和相對單位。
  • CSS網頁設計時關於字體大小的設計
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 CSS網頁設計時關於字體大小的設計
  • 網頁常用字體設計,你最喜歡哪一種?
    作為網頁設計師,我們希望有精美的字體來幫助我們為網頁排版，好的排版是組成優秀網頁設計的重要組成部分，字體在網頁設計中扮演了相對重要的一個角色,所以在網站中,選用什麼樣的字體也是一個相對比較重要的工作，今天跟大家分享下在網站當中常用的字體。
  • 還是網頁字體這事
    還是網頁字體這事 P迪 | 2010-03-05 13:01:08 | 產品設計
  • css font-family屬性設置元素的字體
    font-family屬性定義及用法在css中，font-family屬性是使用來規定元素的字體系列，把多個字體名稱作為一個「回退」系統來保存，如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表，瀏覽器會使用它可識別的第一個值。有兩種類型的字體系列名稱：指定的系列名稱：具體字體的名稱，比如："times"、"courier"、"arial"。
  • 43 字體屬性詳解和自定義字體的定義和使用
    font-family屬性字體是有很多種的，比如你使用word或者PPT的時候，選擇文字的字體，會有黑體、宋體等等非常多種類的字體。family是家庭、家族的意思，所以font-family就是字體家族，用於設置網頁上的字體。
  • IOS13(ipad os)安裝字體教程
    1、首先安裝捷徑「 Install Font」捷徑https://www.icloud.com/shortcuts/079b4d51e3824e3da3e2c42ec9a86943注意 13 需要去設置
  • 網頁|CSS字體介紹
    除了上一節我們講到的背景以外，字體也是一個我們最常用到的屬性，接下來我們就來講一講CSS字體。CSS字體(font)屬性定義文本中的字體，我們將從以下幾個方面進行介紹。可以使用font-family屬性定義文檔採用的優先字體系列。1. 通用字體系列CSS定義了5種通用字體系列：a)Serif字體系列的字體成比例，而且有上下短線。
  • Birdfont 2.1 發布,字體編輯器
    Birdfont 2.1 發布，此版本改進內容如下：• A new spacing tab  • Improved Beziér editing  •
  • 默認Web字體樣式
    拿字體來說，各個瀏覽器默認的字體種類、字體大小和字體行高都不一樣，比如IE8的中文版在Windows XP下顯示網頁時默認字體是宋體，而英文版肯定不會如此。所以我們需要統一設置默認的字體樣式，以便實現一致的顯示效果來保證設計的一致性和提高開發效率。
  • 網頁設計中的 serif 和 sans-serif字體應用
    網頁設計中的 serif 和 sans-serif字體應用。Howdy, 大家好，又是我~上一次我們簡單的談了一下font set和一些要注意的基本問題。今天我們繼續字體這一話題，深入講講上次提到的「通用字體族」。
  • Birdfont 0.47 發布,字體編輯器
    Birdfont 0.47 發布，此版本更新內容如下： • Oblique 和 italic 轉換  • 改進 overview 標籤
  • 網頁設計中各度量單位的比較
    在網頁中對網頁元素的大小修飾除了數值大小外，還有就是度量單位的選擇了。首先我們了解下網頁設計中的各類單位及說明。如{font-size: 2pc;}表示文字大小為24pt；以上單位均為定值，改變瀏覽器中瀏覽文字大小不會對應用這些單位的文字產生變化。字體高（em）表示當前文本的尺寸。
  • 圖標字體 Font Awesome 中文站上線啦!全面兼容IE7+
    作為最流行的圖標字體Font Awesome，它被認為是為Bootstrap而創造的圖標字體；具有以下幾大優點
  • 在Axure 9.0 上使用 Font Awesome
    一、在本地安裝 Font Awesome 字體文件要想使用 Font Awesome，必然本地需要先可以識別，那麼需要先安裝字體文件。前往官方下載頁面 https://fontawesome.com/download，選擇下載 Free for Desktop 版本。
  • HTML教程:如何設置字體顏色
    在網頁開發的過程中，有時為了網頁的美觀，需要給網頁中的字體設置不同的顏色，那麼，怎麼來設置字體顏色呢？本篇文章就來給大家來介紹html設置字體顏色的三種方法。話不多說，我們來直接看正文。html字體顏色設置的方法一：html font設置字體顏色語法：<font color="red"> </font>
  • CSS基礎—文字的尺寸、字體、行距及顏色
    文字的尺寸、字體、行距及顏色樣式標籤為font-size（尺寸）、font-family（字體）、line-height（行距）、color（顏色）。例如，font-size在PC網頁中被設置為16px，在手機端顯示該網頁時，文字會顯示的比較大，因為PC屏幕的解析度一般都大於手機屏幕的解析度。em是一個相對單位，主要是相對於父元素的font-size。