web

如何在網頁中使用 Google Icon Font 免費圖示?

如何在網頁中使用 Google Icon Font 免費圖示?

「圖示」運用得當,絕對勝過用文字描述,以往要在網頁裡使用圖示,可以使用圖檔,但不論是要更改尺寸、顏色都相當麻煩,而現在大多使用 Icon Font,將圖示變成字形來使用,這樣一來不論日後維護要改尺寸大小、顏色就相當方便,「Google Font」內現在就有提供成套風格且免費的 Icon Font 供使用者應用,如果習慣使用圖檔,每個圖示同樣都有提供 PNG、SVG 圖檔格式,不論是應用在網頁、Android 或是 iOS 都不是問題。

繼續閱讀»»»

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

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

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

繼續閱讀»»»

Gifmemes.io 替 Gif 加入更添樂趣的動態文字

Gifmemes.io 替 Gif 加入更添樂趣的動態文字

網路上常可以見到替圖片加入文字做成梗圖的宣傳手法,後製過程雖簡單,但卻可讓人印象深刻,網路上也有很多類似的資源可供免費應用,而 Gifmemes.io 這個網站,則是提供可在 MP4、Gif、avi 或 Webm 這類檔案加入文字的免費服務( 一律輸出成 gif 或 Webm 類型檔案 ),如果你以為是加入靜態不會移動的文字,那就有點小瞧該網站了,其加入的文字是可以由使用者設定軌跡,讓其跟著主角進行移動,其操作過程可分段編輯,不論是文字的內容、尺寸大小、顏色或是移動的軌跡、均可以由使用者來自定,讓梗圖不是只有靜態的梗圖,更能是有創意的動態梗圖。

繼續閱讀»»»

如何啟用 Chrome 瀏覽器內大面板的數字分頁選擇器?

如何啟用 Chrome 瀏覽器內大面板的數字分頁選擇器?

以前的一個瀏覽器只能開啟一個網站,所以要瀏覽多個網站就必須開啟多個瀏覽器,後來改進成一個瀏覽器可以利用不同的分頁來開啟不同的網站,不同的做法各有不同的優缺點,只是現在主流的瀏覽器幾乎都是以後者為主,但,該如何在一個瀏覽器多個分頁內切換到想要去的分頁,卻成了問題,尤其是同一個網站以多個分頁瀏覽不同的網頁,在分頁擠壓下並不容易判斷,藉此,Chrome 可以藉著開啟「WebUI Tab Strip」和「Touch UI Layout」這兩項實驗性功能,直接標出目前分頁總數量,而點擊數量圖示按鈕,就可以大面板預覽目前分頁內容,讓用戶可以正確的判斷所要去的分頁。

繼續閱讀»»»

Iconpie 快速產生適用於 Web、Android 及 Apple App 各種圖示尺寸

Iconpie 快速產生適用於 Web、Android 及 Apple App 各種圖示尺寸

對架設網站,寫 Android、Apple App 的初學者而言,實在很難在各方面做到面面俱到,以架設一個網站而言,除了要懂 HTML、CSS、JavaScript、Database 及一個程式語言像是 ASP.Net 或是 PHP 等,甚至也還要有基本的網路運用概念,然後加上美工,負擔不小,因此,有些工作我們可以交給線上工具來完成,像是各類應用程式要使用的 ICON,而 Iconpie 這個網站,就是一個可以協助使用者快速產生適用於 Web、Android 及 Apple App 各種圖示尺寸的免費工具,用戶僅需要上傳要做成圖示的圖片( png/gif/ jpg )就幫你產生,快速又方便。

繼續閱讀»»»

RocketCake 免費回應式網頁編輯器

RocketCake 免費回應式網頁編輯器

為了解決同一個網頁能在不同的螢幕解析度下,仍可以有適合的呈現大小與內容,因此,網頁設計時就會採用 Responsive web design 的技術,這樣的作法不但可讓使用者獲得良好的閱讀體驗,日後網頁的維護也能較為輕鬆。而要設計回應式網頁,網路上有很多的範例可供參考與應用,初學者如果還沒有慣用的網頁編輯器,也可以考慮來使用 RocketCake free responsive website editor 這個可設計回應式網頁的免費編輯器,該應用程式本身就有內建一些網頁模板可供運用,且提供所見即所得的編輯方式,即便是非初學者,也可以使用此方式,取得自己想要的網頁效果。

繼續閱讀»»»

請輸入關鍵字


請選擇...


˄