如何在一個頁面中使用兩種字體系列？

我的網頁有兩種語言，英文和中文，我只能將一種字體應用於同一種語言，我怎樣才能同時將兩種字體應用於英文和中文？？如何在一個頁面中使用兩種字體系列？

@font-face { 
    font-family: 'Kavoon'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(http://example.com/myfonts.eot); 
    src: local('Kavoon Regular'), local('Kavoon-Regular'), url(http://example.com/myfonts.eot) format('embedded-opentype'), url(http://example.com/myfonts.woff) format('woff'); 
}

如何更改此定義以支持我的要求？

來源

2015-04-24 Peng Kim

您可以使用其他語言創建另一個字體。添加如何將這種字體應用於元素。所以我們得到完整的圖片。 – Codelord

你的意思是定義兩個font-face？他們會互相沖突嗎？ –

使用不同的字體系列名稱。 – Codelord

碼主的答案是正確的，但總是嘗試轉換您的字體爲每個瀏覽器：

英語：

@font-face { 
    font-family: 'english'; 
    src: url('english.eot'); 
    src: url('english.eot?#iefix') format('embedded-opentype'), 
     url('english.woff2') format('woff2'), 
     url('english.woff') format('woff'), 
     url('english.ttf') format('truetype'), 
     url('english.svg#english_medregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

中國：

@font-face { 
    font-family: 'chinese'; 
    src: url('chinese.eot'); 
    src: url('chinese.eot?#iefix') format('embedded-opentype'), 
     url('chinese.woff2') format('woff2'), 
     url('chinese.woff') format('woff'), 
     url('chinese.ttf') format('truetype'), 
     url('chines.svg#chinese_medregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

你可以用這個工具轉換你的字體：http://www.fontsquirrel.com/tools/webfont-generator

來源

2015-04-24 11:49:17 Rotan075

otf？我曾經使用它，它不能轉換otf格式 –

這並不重要。當您使用字體（或從互聯網上下載免費字體）時，大部分時間字體都是.ttf文件格式。可能會改變字體可用的形式。otf，如果是這樣的話，把它放在轉換器中，如果你有兩個你可以添加到你的CSS，你會得到該格式的正確的CSS樣式。看看這個主題了解更多信息：http://superuser.com/questions/96390/difference-between-otf-open-type-or-ttf-true-type-font-formats – Rotan075

如果我看看你的代碼我看到你使用「kavoon」字體系列。如果你在這裏下載你的字體：http：//www.fontsquirrel.com/fonts/kavoon，並在發生器中使用它，它會正確轉換它。 – Rotan075

您可以爲不同的字體創建另一個字體。

英語：

@font-face { 
font-family: EnglishFont; 
src: url(source_to_english.woff); 
}

中國：

@font-face { 
font-family: chineseFont; 
src: url(source_to_chinese.woff); 
}

其他：

@font-face { 
font-family: OtherFont; 
src: url(source_to_other.woff); 
}

來源

2015-04-24 10:28:31 Codelord

據我所知，還有總部設在臺灣的服務可以幫助您使用不同中文字體。

http://en.justfont.com/fonts

由於大尺寸中國字體文件，建議使用谷歌的雲服務。但是沒有合適的中文字體。所以你可以試試這個justfont web字體服務。

爲特定的字體重量選擇你想要的任何字體。然後它會被添加到您的項目中。
選擇你的選擇一樣.notosans，#notosans或h2
點擊「JS」按鈕，讓你的代碼爲您設置
前<body>
添加它插入您的class和id。

試試看，使用class和id來獲得美麗的中文字體。 :)

來源

2015-05-13 01:30:41 chenghuayang

yup，謝謝，谷歌中文字體名爲[google font]（https://www.google.com/get/noto/#/）** Noto Sans CJK SC **，它幾乎有16 MB的大小，谷歌在中國被禁止 –

如何在一個頁面中使用兩種字體系列？

回答

相關問題