Preface

CSS3 can set custom font-family with src pointing to the specific font file. We can use it for some cool font or use it when there is no specific font on the user’s computer.

However, when I try to use it I find something blocking my way.

Main

Well, it’s about the language problem.

As we all know, if I try to use some font for Non-English language the font file may not be small enough. For example, I am trying to use some kind of Chinese font and I find the font file. However, the file is more than 5M and I haven’t handled the compatibility problem.

So, I am trying to find a solution about this. And I find fontmin!

fontmin will extract the text you files used and generate the corresponding font file which is much smaller than your original font file.

For example:

var Fontmin = require('fontmin')
var srcPath = 'src/font/*.ttf'
var destPath = 'asset/font'
var text = '我说你是人间的四月天；笑响点亮了四面风；轻灵在春的光艳中交舞着变。'

// initial
var fontmin = new Fontmin()
  .src(srcPath) // font file you want to simplify
  .use(
    Fontmin.glyph({
      // extract glyph
      text: text // all the text you will use
    })
  )
  .use(Fontmin.ttf2eot()) // eot transform plugin
  .use(Fontmin.ttf2woff()) // woff transform plugin
  .use(Fontmin.ttf2svg()) // svg transform plugin
  .use(Fontmin.css()) // css generation plugin
  .dest(destPath) // output the simplified font file

// run
fontmin.run(function(err, files, stream) {
  if (err) {
    console.error(err)
  }

  console.log('done')
})

In my case, I need to extract text from some file. So, I do it like this:

var text
var fs = require('fs')
fs.readFile('data.js', 'utf8', function(er, data) {
  if (er) {
    return console.log(er)
  }
  text = data

  var Fontmin = require('fontmin')
  var srcPath = 'font/*.ttf'
  var destPath = 'font/'
  // initial
  var fontmin = new Fontmin()
    .src(srcPath) // font file you want to simplify
    .use(
      Fontmin.glyph({
        // extract glyph
        text: text // all the text you will use
      })
    )
    .use(Fontmin.ttf2eot()) // eot transform plugin
    .use(Fontmin.ttf2woff()) // woff transform plugin
    .use(Fontmin.ttf2svg()) // svg transform plugin
    .use(Fontmin.css()) // css generation plugin
    .dest(destPath) // output the simplified font file

  // run
  fontmin.run(function(err, files, stream) {
    if (err) {
      console.error(err)
    }

    console.log('done')
  })
})

And here is what I got:

which is much smaller than origin Microsoft YaHei UI Light.ttf(11M).

However, here is a little tip I want to give you.

After you run the script above, the original font file *.ttf has been replaced. So, you had better back up the original font file before you run the script. Then if you need to run the script again, you should use the original font file, not the file which has been updated.

Preface

When the designer asked me what is the font of some text I told her to press F12 and check the font-family in Computed, like this:

Main

However, when I am using that font-family I find that I was totally wrong. The actual font the text used is this:

That is totally different from the font-family though I know that we can’t be sure that the browser would use the font-family we set in css.

Ending

Reference

• how-can-i-determine-what-font-a-browser-is-actually-using-to-render-some-text

Main

Access localhost on Mobile

As you know, If I am working with url like http://localhost:8080 It doesn’t work on mobile. So, I have to try another way. After some research, I find something related:

• localhost is a hostname which points to 127.0.0.1 by default and also can be changed.

Normally, we are using the same WIFI on our computer and mobile. So, in my case,

• I use command ipconfig and got the ip 192.168.x.x.
• I add --host 192.168.x.x in my package.json scripts like this:

{
  "name": "webpack-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "build": "npm run lint && webpack --config webpack.config.js -p",
    "dev": "npm run lint && webpack-dev-server --config webpack.dev.config.js --inline --host 192.168.x.x",
    "lint": "./node_modules/.bin/eslint js"
  },
}

• If you aren’t using package.json, you can directly replace localhost to 192.168.x.x in the url.
• Then I open the url http://192.168.x.x:8080 on my computer and mobile. Both work!

Ending

Reference

• 移动端前端开发调试