Merge pull request #56 from 1heisuzuki/feature/appropriate-font-weight

フォント選択時に適切なウェイトが選択されるようオプションを追加

index.html

@@ -139,7 +139,7 @@
 
             <div class="control_form control_form_selector col-3">
               <label for="select_font" class="control_label">フォント </label>
-              <select id="select_font" onchange="document.getElementById('result_text').style.fontFamily=fonts_custom[select_font.selectedIndex][1]" style="width: 94%; height: 100%;"></select>
+              <select id="select_font" onchange="document.getElementById('result_text').style.fontFamily=fonts_custom[select_font.selectedIndex][1];document.getElementById('result_text').style.fontWeight=fonts_custom[select_font.selectedIndex][2]" style="width: 94%; height: 100%;"></select>
             </div>
 
             <div class="control_form control_form_selector col-2">

main.js

@@ -620,14 +620,14 @@ function googleTranslateElementInit() {
 // フォント切替
 // 参考: https://www.google.com/intl/ja/chrome/demos/speech.html
 var fonts_custom = [
-  ['Noto Sans JP', "'Noto Sans JP', sans-serif"],
-  ['BIZ UDPゴシック', "'BIZ UDPゴシック', 'BIZ UDPGothic', 'Noto Sans JP', sans-serif"],
-  ['BIZ UDP明朝', "'BIZ UDP明朝', 'BIZ UDPMincho', 'Noto Sans JP', serif"],
-  ['游ゴシック', "游ゴシック体, 'Yu Gothic', YuGothic, sans-serif"],
-  ['メイリオ', "'メイリオ', 'Meiryo', 'Noto Sans JP', sans-serif"],
-  ['ポップ体（Windows）', "'HGS創英角ﾎﾟｯﾌﾟ体', 'Noto Sans JP', sans-serif"],
-  ['ゴシック体（ブラウザ標準）', "sans-serif"],
-  ['明朝体（ブラウザ標準）', "serif"]
+  ['Noto Sans JP', "'Noto Sans JP', sans-serif", '500'],
+  ['BIZ UDPゴシック', "'BIZ UDPゴシック', 'BIZ UDPGothic', 'Noto Sans JP', sans-serif", '700'],
+  ['BIZ UDP明朝', "'BIZ UDP明朝', 'BIZ UDPMincho', 'Noto Sans JP', serif", '400'],
+  ['游ゴシック', "游ゴシック体, 'Yu Gothic', YuGothic, sans-serif", 'bold'],
+  ['メイリオ', "'メイリオ', 'Meiryo', 'Noto Sans JP', sans-serif", 'bold'],
+  ['ポップ体（Windows）', "'HGS創英角ﾎﾟｯﾌﾟ体', 'Noto Sans JP', sans-serif", 'bold'],
+  ['ゴシック体（ブラウザ標準）', "sans-serif", 'normal'],
+  ['明朝体（ブラウザ標準）', "serif", 'normal']
 ];
 
 for (var i = 0; i < fonts_custom.length; i++) {

style.css

@@ -130,6 +130,7 @@ a:active {
 	font-family: 'Noto Sans JP', sans-serif;
 	font-size: 68px;
 	font-weight: 500;
+	font-synthesis: none;
 	letter-spacing: 0.05em;
 	line-height: 163%;
 	color: #fff;