關於響應式網頁設計(RWD)

2019-04-18 17:12:48.21

分類: Products and Applications

RWD淺談

先前我們在介紹Web Font時曾經提過:「RWD網頁可以針對不同的載具選擇不同粗細的字型,讓小螢幕上顯示的字不會糊成一團」,除了道出了Web Font的優點,也點出了一個好的RWD網站,應該要將載具適合的字級大小考慮進去,而今天我們就繼續介紹,什麼是RWD(Responsive Web Design)式的網頁。

根據Google Developers對於RWD的介紹中解釋:「任何解析度的裝置,伺服器傳的都是同一份的HTML,透過CSS來判定裝置的解析度後,生成適合該裝置大小的畫面顯示。」,因此一個網站可以用電腦、平板、手機來瀏覽,且都會得到最適合的畫面與內容。

任何解析度的裝置,伺服器傳的都是同一份的HTML。

 

早在RWD概念盛行前,就已經有許多購物與行動網站注意到,根據電腦螢幕所顯示的內容架構,可能不適合在手機上,因此他們購買了第二個網域,建立專給手機的頁面,以COSTCO網站為例,如果你看到的網域包含了特殊的前贅字(http://m.costco.com),可能就是這樣的方式。但早先HTML與CSS並未發展到目前的階段,因此這樣形式的網頁多採WML(Wireless Makeup Language)語法所編寫,然而該語法是以XML為基礎,有點類似簡易版的HTML,因此在許多功能的撰寫上都會受限。

在智慧型手機流行後,各家瀏覽器廠商如Chrome, Firefox, Safari, Opera等,也都有針對手機版本所開發的瀏覽器,這時,開始有了以偵測瀏覽器是哪種版本來決定對應內容的方式,而這種方式由於各廠商與各版本間有太多不同的組合,因此在會需要針對許多的版本做設定,甚至要定義不同的手機解析度就是個大議題。

因此在HTML5和CSS3出現之後,許多可以自動偵測螢幕大小與根據大小調整內容比例的語法,就成為了RWD概念的核心技術:簡單的說就是取得裝置的螢幕大小,設定每個標籤的內容該出現的比例與位置。這樣的方式,讓網站工程師只需要針對一個網站開發,就可以讓拜訪者(Visitor)根據其裝置得到最佳的畫面呈現,除了畫面美觀外也更有效的吸收網站資訊,因此成為了近年來製作網頁的熱門詞彙。

HTML5和CSS3是RWD概念的核心技術。

 


Products and Applications

在使用win10無法輸入文字要怎麼辦?

是不是有很多人最近升級到Windows10 20H1與20H2都會覺得輸入法哪裡怪怪的,時而閃退、部分候選字出不來或是直接當機呢!!!這真的是擾民,但又沒辦法不使用,這不是字型的問題,但在微軟還沒針對此問題做修改前,我們可以嘗試幾個步驟,讓你的輸入法起死回生。

 

目前微軟還在研究IME模式問題的解方案,如果使用者發現自己電腦上的輸入法發生異常的情況,不妨先嘗試透過 Windows Update 安裝更新,看看情況是否得到改善,如果沒有的話話,我可以先IME本,暫時決問題如何切換舊版,可以照以下步及可暫時目前的擾。

 

Step1. 左下始功能列點選

 

 

Step2. 點選時間與語

 

Step3. 點選中文() 

 

Step4. 選擇使用中的法,點擊選項

Step5. 選擇一般

Step6. 一般選擇使用舊版的微注音開關開啟

 

 

 

以上的步驟可暫時目前所遇到IME入法問題當務之急,在微軟尚未對此問題更新前,大家不妨試試。

Products and Applications

文鼎DC陳森田MORITA

文鼎DC陳森田MORITA是文鼎字型與插畫家_陳森田合作開發的手寫字型,所有字體的內容包含中文、英歐文、符號等,都是陳森田手寫繪製,再由文鼎字型作數位化產品設計,產品同時涵蓋繁體中文、簡體中文。

陳森田MORITA_B體將漢字定距字與調和字整合在一個字型檔案裡,讓,森田手寫字的手感、Q感及溫度可以呈現出來。使用者透過字型選單選擇適合情境的字型做應用。

 

本影片透過Adobe Illustrator來呈現文鼎DC陳森田體的使用方式,演示漢字定距與漢字調合設計排版上視覺的不同。

應用設計

Products and Applications

適合企業的用字方案

每日,企業中,專案經理為了新成立的專案撰寫企劃書和時程規畫,業務與客戶提案用簡報介紹公司產品,福利委員會籌辦公司員工旅遊的行程表,公司和客戶之間的合約書等這些情境文字佔有相當程度的重要性,選用合適造型的字體來詮釋文句,可有效的增加訊息閱讀的效率、簡報的可讀性,更可增加讀者的印象。

文鼎雲字庫包含繁體中文、簡體中文、日文、韓文、拉丁等語言文字共有超過1500個字行可供選擇使用,當中更引進歐洲字型廠商Dalton MaagTypotheque高品質的拉丁字型供使用者選擇使用。 

2021年文鼎新上架字體數量達到67套字之多,新字型有文鼎白玉書體H16C90、文鼎書苑宋HKDisplayH16~H62、文鼎簽字筆體、文鼎DC光璐硬笔楷书、文鼎花栗體等,使用文鼎iFontCloud雲字庫字型賃服務,在租賃期間可免費的獲得新字體使用。

2021年新上架字體中最受大家關注和討論為文鼎花栗體,此套字型以花栗鼠與橡實外型做設計發想的Display Type。筆型設計帶有圓潤感,充滿著花栗鼠小巧可愛的樣貌,橫、豎筆畫無拘泥的建築於字體結構,以律動的方式帶出手寫字的溫度感,其展現花栗鼠的活力、不受拘束的性格,讓使用者能透過花栗體可愛、自由的特色在生活中增加幸福感。

  

繁體中文

繁中旗艦包 (標準):繁中及英歐文字型,每季會增加新字型,共350套以上

文鼎繁中DC風格包(進階):文鼎與設計師共同合作設計繁中字型,書法大師、插畫家、設計師手寫、手繪的真跡精選合輯,保留手書原貌,涵蓋經典書法、心動手寫、現代設計等風格

文鼎UD晶熙黑體-東亞字型包 (進階):提供不同語系的晶熙黑體字型,包含繁中、簡中、日文、韓文及英歐文的晶熙黑字型包

方新書字型包 (進階):提供繁中、簡中及Condensed的方新書字型

 

拉丁

AR Latin Font Pack (進階):文鼎拉丁字型包共109套英歐文字型

Dalton Maag Font Pack 2019(進階):英國知名字型設計公司Dalton Maag設計的282套英歐文字型包

Typotheque Font Pack(進階):荷蘭知名的字型設計公司,字型支援西歐、東歐、北歐、希臘、斯拉夫…等文字及符號

 

日文

文鼎日文字型包(進階)54套日文JIS 0208字型

 

韓文

Sandoll Korean Font Pack (進階)48套韓文字型

 

簡體中文

簡中旗艦包 (標準):簡中及英歐文字型,每季會增加新字型,共350套以上

文鼎簡中DC風格包(進階):文鼎與設計師共同合作設計簡中字型,書法大師、插畫家、設計師手寫、手繪的真跡精選合輯,保留手書原貌,涵蓋經典書法、心動手寫、現代設計等風格