林金露老師_網頁設計線上數位教學網誌

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;
}