elf_round

• 字母放大化，并使其尽量与中文字体垂直居中(但是考虑到英文字母的高度不统一，又不能过于放大)，请看对比：

  字体	演示 ( 字体大小：48px | 3rem )
  elf_round	UI精灵 uielf.cn
  serif	UI精灵 uielf.cn
  sans-serif	UI精灵 uielf.cn

• 字符差异扩大化，使一些看上去比较相似的字母符号，区分更容易，请看下面各字体对比：

  字体	演示 ( 字体大小：48px | 3rem )
  elf_round	1iIlL|ⅠⅡ/∥ 0oO ''""``
  serif	1iIlL|ⅠⅡ/∥ 0oO ''""``
  sans-serif	1iIlL|ⅠⅡ/∥ 0oO ''""``

• 优化了字符与中文的混排，使字符与汉字垂直居中，大小也更协调，解决了英文字母比汉字看上去较小的问题；
• 使字体的弧线更圆,简单易认；
• 整个字体包10~20KB左右.

由于elf_round字体在设计时，采用了英文字母放大化，字符差异扩大化的特点，所以非常适用于程序代码的显示，请参考如下示例：

import {Component} from 'react';

export class Greeter{
  greetNTimes(to,{from,times}){
    return range(times).map(item=>this.greet(to,from));
  }
}

export class ConsoleGreeter extends Greeter{
  greet(to,from){
    return `Hello, ${to} from ${from.join(',')}`;
  }
}

export class ReactGreeter extends Greeter{
  greet(to,from){
    return (
      <div className="greeting">
        Hello, {to} from {from.map(name=>
        <Name>{name}</Name>)}
      </div>);
  }
}

new ConsoleGreeter().greetNTimes('World',{
  name:['Webstorm'],
  times:3
});

function * fibonacci(current=1,next=1){
  yield current;
  yield * fibonacci(next,current+next);
}

let [first,second,...rest]=take(fibonacci(),10);

function foo(x,y,z){
  var i=0;
  var x={
    0:"zero",
    1:"one"
  };
  var a=[0,1,2];
  var foo=function(){};
  var asyncFoo=async(x,y,z)=>{ };
  var v=x.map(s=>s.length);
  if(!i>10){
    for(var j=0; j<10; j++){
      switch(j){
        case 0:
          value="zero";
          break;
        case 1:
          value="one";
          break;
      }
      var c=j>5 ? "GT 5" : "LE 5";
    }
  }
  else{
    var j=0;
    try{
      while(j<10){
        if(i==j||j>5){
          a[j]=i+j*12;
        }
        i=(j<<2)&4;
        j++;
      }
      do{
        j--;
      }
      while(j>0);
    }
    catch(e){
      alert("Failure: "+e.message);
    }
    finally{
      reset(a,i);
    }
  }
}
          

在CSS中使用@font-face定义字体后，就可以愉快的使用了，您也可以复制如下代码到您的项目，注意web字体包的路径要指定正确。

 @font-face {
    font-family: 'elf_round';
    src: url('elf_round.eot');
    src: url('elf_round.eot?#iefix') format('embedded-opentype'),
         url('elf_round.woff') format('woff'),
         url('elf_round.ttf') format('truetype'),
         url('elf_round.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
   }
   body { font-family: "elf_round", sans-serif; }