2012年12月20日 星期四

CSS 中英文字型分開

從以前就一直想把 Chrome 的字體改成 Eurostile + Microsoft JhengHei ...
所以之前都是傻傻的用 FontCreator 去整合 
直到昨天下午都還在整合這 TrueType Font 

但是...不管是換成了 Eurostile LT、Eurostile Extended、Eurostile LE Condensed 等等字體
都還是會有縮放時邊緣破裂的問題 
但是 Google "Chrome 中英文字體分開" 等等關鍵字都沒有答案...
就在傍晚時突然想到以前曾經用 CSS 去改過 Chrome 的內建中文很鳥的問題
於是，就在亂翻文件下找到了「Custom.css」這東西 
於是再次 Google 相關關鍵字...
終於讓我找到啦「利用 CSS 分別設定中文字、英數、注音、假名的字體：使用 CSS3 @font-face」  

於是就這樣開始了...
一開始仍舊很不順利，到最後才恍然大悟...
因為我一直是存成 ANSI 
把它改成 UTF-8 Unsigned 之後就OK了 

由於這作法不只用在這邊，也可以用在網頁的 CSS 上
所以就...以後有空再來玩玩看 

────────────────────────────────────────────────────────────

Step1. 開啟「%userprofile%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\」裡面的「Custom.css」

Step2. 加入以下 CSS 語法


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
@font-face {
 font-family: 'MyFont';
 /*自訂一個名稱*/
 src:   local('微軟正黑體');
 /*預設的字體*/
}

@font-face {
 font-family: 'MyFont';
 /*要替換的部分...當然用同一個名稱*/
 unicode-range: U+0000-2E7F;
 /*Unicode $0000~$2E7F 的部分*/
 src:   local('Eurostile'),local('微軟正黑體');
 /*要使用的字體，第一個沒有會用第二個...依序下推*/
}

* {
 font-family: 'MyFont','微軟正黑體', sans-serif !important;
 /*更改全域設定，字體以MyFont為主...沒有會找微軟正黑、sans-serif*/
}

Step3. 存成「UTF-8」

────────────────────────────────────────────────────────────

通常存完後 Chrome 不用重開就會自己變了...
而若是用在網頁上，是別人沒有的字體呢？
那就是把... src: local('Eurostile') 換成


1
2
3
4
5
@font-face {
 font-family: 'MyFont';
 src:   url('Fonts/Eurostile.ttf'),
    url('Fonts/Eurostile.eot') format('opentype')  /*IE用*/
}

為啥IE比較特別？因為IE不支援直接用 *.ttf/*.otf ...
IE只支援 Embedded OpenType (*.eot) 需用 Microsoft Web Embedding Fonts Tool 來做...




好了...改天有空再來玩玩看吧 

標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)