Noto 字型與微軟正黑體之比較

Noto 字型下載: http://www.google.com/get/noto/#/family/noto-sans-hant

by Johnny Lee

HTML

<form action="javascript: return true;">
Set font size: 
<button id='btn12px' onclick='setFontSize("pixel12");'>12px</button>
<button id='btn20px' onclick='setFontSize("pixel20");'>20px</button>
<button id='btn28px' onclick='setFontSize("pixel28");'>28px</button>
<button id='btn40px' onclick='setFontSize("pixel40");'>40px</button>
<button id='btnnormal' onclick='setFontBold("normal");'>Normal</button>
<button id='btnbold' onclick='setFontBold("bold");'>Bold</button>
Set Weight:
<input type="text" style='width:50px; text-align:center;' id="txtWeight" pattern="[1-9]00" title="請輸入 100 ~ 900" value='100' /><button type='submit'  onclick='setFontWeight();'>Apply</button>
<p id="p1">(微軟正黑體)人人生而自由，在尊嚴和權利上一律平等</p>
<p id="p2">(Noto Thin)人人生而自由，在尊嚴和權利上一律平等</p>
<p id="p3">(Noto Light)人人生而自由，在尊嚴和權利上一律平等</p>
<p id="p4">(Noto DemiLight)人人生而自由，在尊嚴和權利上一律平等</p>
<p id="p5">(Noto Regular)人人生而自由，在尊嚴和權利上一律平等</p>
<p id="p6">(Noto Medium)人人生而自由，在尊嚴和權利上一律平等</p>
<p id="p7">(Noto Bold)人人生而自由，在尊嚴和權利上一律平等</p>
<p id="p8">(Noto Black)人人生而自由，在尊嚴和權利上一律平等</p>
</form>

CSS

.pixel12 {
    font-size: 12px;
}
.pixel20 {
    font-size: 20px;
}
.pixel28 {
    font-size: 28px;
}
.pixel40 {
    font-size: 40px;
}
.normal {
    font-weight: normal;
}
.bold {
    font-weight: bold;
}
#p1 {
    font-family: 微軟正黑體;
}
#p2 {
    font-family: "Noto Sans T Chinese Thin";
}
#p3 {
    font-family: "Noto Sans T Chinese Light";
}
#p4 {
    font-family: "Noto Sans T Chinese DemiLight";
}
#p5 {
    font-family: "Noto Sans T Chinese Regular";
}
#p6 {
    font-family: "Noto Sans T Chinese Medium";
}
#p7 {
    font-family: "Noto Sans T Chinese Bold";
}
#p8 {
    font-family: "Noto Sans T Chinese Black";
}

JavaScript

function setFontSize(size) {
    $('p').removeAttr('class');
    $('p').addClass(size);
}
function setFontBold(weight) {
    $('p').removeClass('normal bold');
    $('p').css('font-weight', '');
    $('p').addClass(weight);
}
function setFontWeight() {
    var weight = $('#txtWeight').val();
    $('p').removeClass('normal bold');
    $('p').css('font-weight', weight);
}