問(wèn)題描述

是這樣的，今天設(shè)計(jì)稿上用到一種特殊字體，設(shè)計(jì)師給了我字體的.ttf文件，但是有5MB多，這么大，怎么使用，另外如何保證兼容性，

ps: 是在移動(dòng)端的前端開發(fā)

另外：是這樣的，用到特殊字體的字一部分是不確定的，來(lái)源于用戶表單的輸入，，因此，答案里很多方法好像用不上，

問(wèn)題解答

如果你們頁(yè)面用到的文字不多的話，可以考慮試一下：http://font-spider.orgfont-face 的支持在移動(dòng)設(shè)備上兼容性基本沒什么問(wèn)題，可以放心使用：http://caniuse.com/#search=fo...如果內(nèi)容字體很多的話，打出來(lái)的字體包還是很大的話，建議讓設(shè)計(jì)師更換，不然就是坑用戶。

如果只是少數(shù)幾個(gè)字，可以用一些工具把這些字單獨(dú)提取出來(lái)做一個(gè)字體。

移動(dòng)端沒什么兼容問(wèn)題，見下圖

CSS3 自定義字體使用方式

/* 定義字體，客戶端會(huì)主動(dòng)下載服務(wù)器的字體文件 */@font-face{ font-family: ’自定義字體名稱’; src: url(’字體文件路徑’);}/* 使用字體 */body{ font-family: ’你定義字體名稱’; font-size: 65%;}

5M 的字體確實(shí)太大了，而且是移動(dòng)端簡(jiǎn)直要死人了，不僅加載慢而且特費(fèi)流量問(wèn)問(wèn)你們?cè)O(shè)計(jì)能不能壓縮大小，一般保持 1M 以下

移動(dòng)端的話，真沒必要引用那么大的字體，一般Arial 微軟雅黑就可以了。以前設(shè)計(jì)師也弄個(gè)超大的字體文件讓我引用，我用了一次，就不用了，一個(gè)字體比我整體文件還大，得不償失。

1、用到的地方不多的話就使用圖片代替2、如果用的地方比較多建議使用在線字體網(wǎng)站，例如有字庫(kù)

可以使用百度的fontmin工具如果使用gulp，可以按這個(gè)https://www.npmjs.com/package...寫個(gè)任務(wù)比如

//直接提取你需要的字體gulp.task(’fontmin’, function () { return gulp.src(fontpath).pipe(fontmin({ text: ’your text’})).pipe(gulp.dest(destpath));});//提取html中需要被提取的字體，不過(guò)這里fontmin應(yīng)該是提取了body里用到的文字，//然后將所有文字匹配，所以會(huì)有不相關(guān)的字體也被提取，所以，感覺還是上面的方法比較常用function minifyFont(text, cb) { gulp.src(somepath).pipe(fontmin({ text: text})).pipe(gulp.dest(somepath)).on(’end’, cb);}gulp.task(’fonts’, function (cb) { var buffers = []; gulp.src([’xx.html’, ’yy.html’]).on(’data’, function (file) { buffers.push(file.contents);}).on(’end’, function () { var text = Buffer.concat(buffers).toString(’utf-8’); minifyFont(text, cb);});});

如果不需要頻繁更改，還有可視化工具h(yuǎn)ttp://fontmin.forsigner.com/

兼容性問(wèn)題樓上已經(jīng)caniuse截圖