CSS 3.0 Maker 線上 CSS 3.0 語法產生器

CSS 3.0 Maker 線上 CSS 3.0 語法產生器

Cascading Style Sheets 簡稱 CSS,這種可應用在網頁(HTML)或 XML 裡的結構式語法,能讓網頁在排版時呈現多樣式的變化、美觀網頁裡的元素(字型、字體、顏色、間距...)使其每個元素可以有自己的呈現方式,可說是網頁的排版師,也是每個網頁設計師必學課題。目前 CSS 的標準也從1.0、2.0 進展到最新的 3.0,提供了更多的樣式及效果,讓網頁可以變得更生動,對於某些要呈現的網頁效果也省去了使用像是 Flash 或是其它美工軟體來製作。CSS 3.0 Maker 就是一個相當好應用的 CSS 3.0 線上 CSS 語法產生器,對於所需要的效果,可利用其產生器進行調整設定,便能產生出針對各家瀏覽器的支援度所需要的 CSS 3.0 代碼。

如何在 Edge 瀏覽器中將網頁儲存為 PDF 文件?

如何在 Edge 瀏覽器中將網頁儲存為 PDF 文件?

如果想要將網頁的內容儲存成 PDF 文件,方便後續的應用,多數人應該都會選用 Google Chrome 瀏覽器,因為其提供的列印功能,便能將正在瀏覽的網頁輕易的以 PDF 檔案格式轉出,且排版、字形都能完整地保留,這足以完勝還要安裝擴充功能或第三方應用程式才能驗證轉出效果的其他瀏覽器而言,不過,捨棄 IE 的微軟 Edge 瀏覽器也開始提供類似的功能,且以 Microsoft Print to PDF 虛擬印表機的方式內建在 Windows 10 作業系統內,讓所有只要有提供列印功能的 App 或應用程式都可以使用,當然,Google Chrome 瀏覽器也可以,且網頁轉出後的排版、字體也都能保留,效果相當好。

如何讓 Font Awesome 的圖示字型也可以應用在 Word、記事本?

如何讓 Font Awesome 的圖示字型也可以應用在 Word、記事本?

使用文書編輯軟體時,如果碰到要使用圖示來代替文字,例如一個電話或是一個小鈴鐺的圖示,通常的做法就是去找個圖檔來使用,然後調整其大小及其位置,相當麻煩,但如果該圖示可以像打字般的打上一個字的使用方式,相信會更簡單些。Font Awesome 是個以字型的方式來運用圖示的圖示字型,其圖示的類型更是包羅萬象,以往我們都會將其運用在網頁上,而如今也推出 Windows、Mac 可以安裝的 OpenType 圖示字形檔,透過安裝,我們可以將其運用在 Word、PowerPoint、記事本或是 Photoshop 之類的圖形編輯軟體上,讓圖示的顯示就像打字般的簡單。

Font Comparer - Google Web 字型線上預覽服務

Font Comparer - Google Web 字型線上預覽服務

製作網頁時,若想使用一些較特殊的字型,往往需要以圖片的方式來呈現,這是因為來瀏覽網頁者的電腦裡未必裝有該字型,若不使用圖片來呈現,有可能會出現亂碼或是以別的字型來取代,造成排版不易,Google Web Fonts 便有提供該困擾的解決方案,便是將字型以 CSS 的方式做連結,這樣製作網頁與瀏覽網頁的雙方便可以以 Google Web Fonts 為中心來取得該字型,解決此一困擾,目前 Google 提供的字型不少,要如何才能快速找到適合自己網頁裡可以使用的字型呢?可以來試試 Font Comparer 這個免費的 Google Web Fonts 進階應用線上服務,只要輸入要預覽的字體,便會一次列出目前 Google 有提供字型的預覽,並提供 CSS 的使用語法,相當方便。

Font Memory Game 英文相似字體記憶遊戲

Font Memory Game 英文相似字體記憶遊戲

在一個排列整齊的紙盤中,找出曾翻開過的相同圖案,如果不同,紙牌就會再翻回去,玩家必須記住花色的位置,下次如果有翻到記憶中花色的位置,就可以配對,配對成功,就可將該對移除,所以一開始這種相似圖案配對遊戲會有困難度,後面隨紙牌數的減少,配對的速度也會加快,此類的記憶翻牌遊戲相當好玩,牌面可以是人物、動物、植物...等等,Font Memory Game 也屬於此類的網頁遊戲,不同的是其花色採用英文字體,leval 1 採用 10 種變化的 a 字體,且大寫的 A不變,而變化小寫的 a,leval 2 則有 14 種變化的A 與 a 字體,有點挑戰,大家加油。

Font of Web 輸入網址就幫你找出該網站所使用的字體與下載網址

Font of Web 輸入網址就幫你找出該網站所使用的字體與下載網址

瀏覽網站時,如果遇到喜歡的字體,該如何找出該字體名稱與下載呢?這時候,我們可以透過 Font of Web 這個線上工具來協助,只要輸入該網站網址,便可以找出該網站所使用的字體,並產生該字體的下載連結,但,並非所有字體都能產生下載連結,另外該網站會分析輸入網址的主要的 HTML Tag 像是 h1、span、p...等的與字體相關的 CSS,這對要參考其他網站來定義自己網頁字體的大小、字重或 Line Height 也有參考價值,另外,字體下載須注意版權,該網站並不保證所下載的字體可以用於個人或商業。

Fontennium 免費的英文字型,看到的通通帶回家

Fontennium 免費的英文字型,看到的通通帶回家

Fontennium 是一個免費提供英文字型下載的網站,其所提供的獨特免費字型,例如 Alchemy 字體、Roman字體或是Egypta Fonts 字體等等,較有獨特風格的字體,與一般網站提供的字型不盡相同。每套字型都壓縮成 ZIP 檔,方便使用者下載使用,該網站幾乎沒有任何的廣告,介面清爽,就是要讓使用者方便找到自己喜歡的字型方便下載。若對 Windows 7 安裝字型有困難,可參考這篇 如何在Windows7安裝新字型 文章。

font-generator 線上英文字體產生器,免費套用迪士尼、漫畫或電影字等字型

font-generator 線上英文字體產生器,免費套用迪士尼、漫畫或電影字等字型

英文字體相較於中文字型的選擇相當多,以迪士尼、Google、微軟為例,其字型都有專屬的風格,有需要製作類似這些字體風格的英文字圖片,不見得電腦就必須安裝該字形,才能應用,font-generator 這個線上網站都幫你準備好呢,只要輸入要產生的英文字串,接下來再選擇自己喜歡的字體風格,便能快速地產生該英文字串又屬該風格的字體圖片讓你選擇,並可編輯該圖片,直到自己滿意為止,讓後續的應用也可以很簡單。

glitter.im 線上文字特效產生器 ,可產生 Embed Code 方便嵌入網頁裡

glitter.im 線上文字特效產生器 ,可產生 Embed Code 方便嵌入網頁裡

想產生在網頁裡可以應用的文字特效,就算使用繪圖軟體,估計也要花些時間來學習,若不想這麼麻煩,可以來試試 glitter.im 這個網站所提供的文字特效產生器,glitter.im 所產生的文字以閃亮字體為主,可以選擇要搭配使用的文字字體底圖、陰影、邊框、浮雕...等,產生的同時,也會同時產生 Embed Code 方便你可以嵌入到任何網頁裡,不過唯一的缺點就是不支援中文。

華為「HarmonyOS Sans」鴻蒙作業系統中文字型(免費且可商用)

華為「HarmonyOS Sans」鴻蒙作業系統中文字型(免費且可商用)

華為應用在其設備內的鴻蒙作業系統(HarmonyOS), 6月初推出後,隨即釋出作業系統內的 HarmonyOS Sans 字型,該字體由「漢儀字庫」所開發,支援全球 105種語言,不論簡體中文、繁體中文、英文、拉丁文、希臘文、阿拉伯文...均可以使用,字體包含 Thin、Light、Bold、Black、Medium 及 Regular 等 6種字重,除此之外,也支援變寬與等寬的數字字體,這對文、數字混排的文章能有更佳的閱讀體驗,更對數值型的報表或是時間的顯示上有更佳的呈現效果,該字體免註冊,也無一堆有的沒的問卷,直接可下載、應用。