2017年9月20日 星期三

EZoApp 使用Google Font字體

讓你的手機網頁也有美美的中文字體

Google 就提供大量的免費字體讓使用者直接連結,只要在 CSS 內指定特殊字體,不管使用者在世界上任何一個角落,只要有網路,就能夠看到同樣的字體,是不是相當的便利呢!https://fonts.google.com/

EZoApp JQM手機網頁雲端設計平台=http://jqmdesigner.appspot.com/designer.html#id=1493896105121

在其EZoApp的CSS內
@import url(http://fonts.googleapis.com/css?family=Frijole);
 @import url(http://fonts.googleapis.com/css?family=Lily+Script+One);
 @import url(http://fonts.googleapis.com/css?family=Akronim);
 @import url(http://fonts.googleapis.com/css?family=Hanalei);
 @import url(http://fonts.googleapis.com/css?family=Lemon);
 @import url(http://fonts.googleapis.com/css?family=Dr+Sugiyama);
 @import url(http://fonts.googleapis.com/css?family=Bonbon);
 .font1 {
  font-family: 'Frijole';
}
.font2 {
  font-family: 'Lily Script One';
}
.font3 {
  font-family: 'Akronim';
}
.font4 {
  font-family: 'Hanalei';
}
.font5 {
  font-family: 'Lemon';
}
.font6 {
  font-family: 'Dr Sugiyama';
}
.font7 {
  font-family: 'Bonbon';
}

可再另行找到google fonts(https://fonts.google.com/)網站找到要的英文字,再加入使用,如下使用方法
@import url(https://fonts.googleapis.com/css?family=Wendy+One);
.font8 {
  font-family: 'Wendy One';
}


@import url('https://fonts.googleapis.com/css?family=Fredoka+One|Wendy+One|Zilla+Slab+Highlight');
.font9 {
font-family: 'Wendy One', sans-serif;

font-family: 'Zilla Slab Highlight', cursive;
font-family: 'Fredoka One', cursive;
}

複製以上程式碼,回到 EZoApp 的 CSS 編輯畫面,將它貼在最上方,接著我們就可以使用這組字體囉!( 這邊有個要注意的地方,沒有網路的情況下,就會自動使用預設字體 )






若想要使用Google Font中文字字體
方法是:
1.找到Google Font中文字字體網頁網址,(https://fonts.google.com/earlyaccess)找到繁體中文項目




2.拷貝Google中文字-字體語法至EZoApp的CSS內,在指定字體的class名稱即可引用
Google中文字-字體:圓體 
引用語法:
@import url(//fonts.googleapis.com/earlyaccess/cwtexyen.css);
.font10 {
  font-family: 'cwTeXYen', sans-serif;
}





Google中文字-字體: 仿宋體
@import url(//fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
.font11 {
font-family: 'cwTeXFangSong', serif;
}





Google中文字-字體: 黑體
@import url(//fonts.googleapis.com/earlyaccess/cwtexhei.css);
.font12 {
font-family: 'cwTeXHei', sans-serif;
}

Google Font 中文字體(六款)CSS語法引用及使用圖解

Google Font 中文字體(六款)CSS語法引用及使用圖解

提供解決網頁設計師在網頁設計時的中文字體問題


 Google Font 提供黑體、仿宋、明體、楷體及圓體及思源黑體Noto Sans TC等六種中文
若想要使用Google Font中文字字體
方法是:
1.找到Google Font中文字字體-(多國語言字體,含繁/簡/日/韓)網頁網址,(https://fonts.google.com/earlyaccess),找到繁體中文(Chinese Traditional)項目
2.在CSS內引用語法:(@import url引用指定中文字體,再用class命名如 font10,再指定其中文字體的名稱如'cwTeXYen', sans-serif)(https:的網址前導標籤可省略不寫,也可加入)

Google中文字-字體: 圓體 
@import url(//fonts.googleapis.com/earlyaccess/cwtexyen.css);
.font10 {
  font-family: 'cwTeXYen', sans-serif;
}


Google中文字-字體: 仿宋體
@import url(//fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
.font11 {
font-family: 'cwTeXFangSong', serif;
}

Google中文字-字體: 黑體
@import url(//fonts.googleapis.com/earlyaccess/cwtexhei.css);
.font12 {
font-family: 'cwTeXHei', sans-serif;
}

Google中文字-字體: 明體
@import url(//fonts.googleapis.com/earlyaccess/cwtexming.css);
.font13 {
font-family: 'cwTeXMing', serif;
}

Google中文字-字體: 楷體
@import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css);
.font14 {
font-family: 'cwTeXKai', serif;
}

Google中文字-字體: 思源黑體    (Noto Sans TC 常用國字標準字體 7,800個漢字)
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
.font15 {
font-family: 'Noto Sans TC', sans-serif;
}

思源黑體Noto Sans TC已被分類到繁體中文文檔中最常見的7,800個漢字。 添加了223個字符,涵蓋台灣“中華人民共和國商務部”11643 P1和常用國字標準字體表以及香港常用字字形表和IRG HB0和HB1的所有字符。 除了漢子,還包括Bopomofo,CJK Radicals,ASCII,標點符號和全角字符。
思源黑體Noto Sans TC裡面除了標準的 Normal 之外,另外還提供了 100、300、400、500、700、900 五種不同的粗細,你可以透過 font-weight 的方式來調整。
語法如:   font-weight: 500;
Google 當初聯合 Adobe 與其他亞洲合作公司,製作思源黑體與思源宋體的初衷:希望有一套完整的繁體簡體中文、日文、韓文字型,可以讓各種現代網頁、文章、軟體介面上都不再因為缺乏字型而出現空格豆腐字(「 no more tofu 」)。

多年前開始, Google 展開了設計全世界各種語言字型的計畫,一開始的目的是讓 Android 與 Chrome OS 等系統能夠具備完整的多語字型支援,讓每種語言的字型有設計上的一致性,無論在顯示網頁、展示介面、閱讀文書時都「不會出現無法顯示的豆腐方塊」。
所以叫做「 no more tofu 」,簡稱為「 Noto 」,亦稱為「 Google Noto Fonts 」。
其中針對每種特殊語言的字型支援,則是與各種志願者和不同單位合作開發, Google 則提供設計的統一風格指導,例如兩年前在台灣轟動一時的免費中文字型:「Adobe與Google合推全新中文免費字型思源黑體」,正是這個計畫中的一支。


Google Noto Fonts 網址: https://www.google.com/get/noto/

如何在網頁內正確使用google中文字型CDN的方法圖解-讓網頁有美美的各種中文字型

2017年3月12日 星期日

Bootstrap模版特色技巧分析+局部實習案例09-Portfolio滿版圖片左右上下滑動+互動彈出圖文展示

學習Bootstrap網頁設計,在有HTML5+CSS3+jQuery基礎下,想快速學習,建議最佳模式便是大量收集Bootstrap相關網站模版,並且最好能針對你想要的局部特色技巧進行局部實習,最後再做網站開發設計的整合,其中網頁圖片展示技巧的Portfolio是重要的學習對象之一,且互動變化也較多.

這模版案例是針對Portfolio滿版圖片能左右或上下滑動並且能互動彈出圖文展示,算是不錯的展示手法.

有興趣者,可由林金露老師的網站上的Bootstrap相關教材雲端硬碟進行下載來實習.
教材下載網址=https://drive.google.com/drive/folders/0B2WBROm9eo3ENkZRQXp6UjJkcFE
請找到(Bootstrap模版特色技巧分析+局部實習案例09-Portfolio滿版圖片左右上下滑動+互動彈出圖文展示.rar)下載至本機硬碟再解壓縮(pw=flash)

Bootstrap網頁模版編修實習主要是要能學會如何擷取出你想要的局部展示技巧,這個案例重點放在Portfolio滿版圖片能左右滑動,點選圖片還能互動彈出圖文展示,是在商業應用展示很實用的技巧.

這是從Bootstrap網頁模版擷取的局部,網址=http://website.linjinlu.com/portfolioshow02/


當有能力擷取,接下便是網頁應用了.
這是加入8張照片的實習.學習當客戶圖片較多時,你是否會使用這模版的局部技巧.



網頁展示可以變化多元,主要一定要訓練自己有想法哦,所以當會了上面案例,當然再往下多設計學習,再來便是想讓圖片能上下滑動了哦,且要再多張圖片,且能在row多加一col並能分配好.
這是加入9張照片且調整為上下滑動的實習,學習你是否能舉一反三的使用這模版的局部技巧.








2017年3月11日 星期六

Bootstrap+Animate讓Navbar下拉選單動起來共14項動畫效果

Bootstrap+Animate讓Navbar下拉選單動起來共14項動畫效果


Bootstrap模版特色技巧分析+局部實習案例07-Animate.css讓Navbar下拉選單動起來共14項效果
實習完成作品網址(操作一下Navbar下拉選單,感受一下動畫效果)
http://website.linjinlu.com/navbar-animate/

Animate.css 讓Boostrap導覽列的下拉選單動起來-共計14項效果測試網址
http://website.linjinlu.com/navbar-dropdown-animate/

想實習嗎?你可至下列林金露老師提供教材網址拷貝(Bootstrap模版特色技巧分析+局部實習案例07-Animate.css讓Navbar下拉選單動起來共14項效果.rar)來自行實習(教材解密=flash)
https://drive.google.com/drive/folders/0B2WBROm9eo3ENkZRQXp6UjJkcFE




2017年3月8日 星期三

Bootstrap導覽列Navbar中的選單-自定"居中"語法來引用

Bootstrap導覽列Navbar中的選單-自訂義style-css語法,再引用即可自定"居中"

因為Bootstrap官方定義的bootstrap.css語法中,只定義navbar-left靠左及navbar-right靠右,並無置中對齊,若遇到有置中對齊需時,則可透過styley語法,自行定義使其navbar按鈕居中對齊.

navbar按鈕居中對齊語法如下圖:

Bootstrap導覽列Navbar中的選單-自訂義style-css語法,再引用即可自定"居中"

2017年2月25日 星期六

glyphicon 字體圖標-線上自行配色

glyphicon 字體圖標-線上自行配色


glyphicon 字體圖標,線上自行配色及取得程式碼(配色及大小採行內樣式表)
是Bootstrap網頁設計的好幫手哦,請收納至你的Maxthon內,方便日後快速使用.

http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm




2017年1月22日 星期日

Win10x64官方企業版MSDN-ISO安裝記要

Win10x64官方企業版MSDN-ISO安裝記要
1.此版為長期支援版,且為大量用戶授權版
2.此版可直接安裝至主電腦硬碟內或用USB硬碟(WIN10專業版則不可)製作成可攜式PC系統(由BIOS調成由USB開機即可)(可攜式電腦Portable PC教你將windows作業系統安裝到USB外接硬碟的創建方法)
3.安裝好,若不啟用一樣可使用WIN10,只是會限制使用個人化功能,只不可顯示右方工作列即不可調工作列選項功能,不可用個人化照版等個人有相關登入等

(1)可從林金露老師教學官網下載Win10x64官方企業版MSDN-ISO 

(2)請下載Win10x64官方企業版MSDN-ISO的TW_windows_10_enterprise_2016_ltsb_x64_dvd_9057374.iso檔,這是微軟官方的大量用戶授權版

(3)安裝完後,系統所看見的WIN版本資訊,windows是標記未啟用的,若要啟用成為正式版,可至線上去購買授權啟用碼,按右方的啟用Windows,成為正式版
(4)工作列未能自訂圖示顯示出來
(5)工作列因未啟用Windows,所以功能選項受限
(6)個人化功能因未啟用Windows,所以功能選項受限
(7)帳戶資訊功能因未啟用Windows,所以功能選項受限,如不可換上個人照片