图片文本组件拼音问题

src/views/book/courseware/create/components/question/image_text/ImageText.vue

@@ -200,11 +200,12 @@
 <script>
 import ModuleMixin from '../../common/ModuleMixin';
 import UploadFile from '../../base/common/UploadFile.vue';
-import { getImageTextData } from '@/views/book/courseware/data/imageText';
+import { getImageTextData, isEnable } from '@/views/book/courseware/data/imageText';
 import SelectUpload from '@/views/book/courseware/create/components/common/SelectUpload.vue';
 
 import { GetFileURLMap } from '@/api/app';
 import { fileToBase64Text, prepareTranscribe, getWordTime } from '@/api/article';
+import cnchar from 'cnchar';
 
 export default {
   name: 'ImageTextPage',
@@ -238,6 +239,14 @@ export default {
       },
       immediate: true,
     },
+    'data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case': {
+      handler(val) {
+        if (isEnable(val)) {
+          this.handleUpPinyin();
+        }
+      },
+      immediate: true,
+    },
     'data.text_list': 'handleMindMap',
   },
   methods: {
@@ -374,6 +383,9 @@ export default {
               getWordTime(data)
                 .then((res) => {
                   this.data.word_time = res.data.result;
+                  if (this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true') {
+                    this.handleUpPinyin();
+                  }
                   this.loading = false;
                 })
                 .catch(() => {
@@ -395,6 +407,21 @@ export default {
       });
       this.multilingualVisible = true;
     },
+    handleUpPinyin() {
+      if (this.data.word_time.length > 0) {
+        this.data.word_time.forEach((item) => {
+          item.wordsResultList.forEach((items, indexs) => {
+            let pinyin_up =
+              indexs === 0
+                ? cnchar.spell(items.wordsName, 'low', 'tone').charAt(0).toUpperCase() +
+                  cnchar.spell(items.wordsName, 'low', 'tone').slice(1)
+                : items.pinyinWithToneMark;
+            this.$set(items, 'pinyin_up', pinyin_up);
+            items.pinyin = items.pinyinWithToneMark ? items.pinyinWithToneMark : items.onebest;
+          });
+        });
+      }
+    },
   },
 };
 </script>

src/views/book/courseware/data/imageText.js

@@ -45,5 +45,7 @@ export function getImageTextData() {
       answer_list: [],
     },
     multilingual: [], // 多语言
+    parse: '', // 解析
+    reference: '', // 参考答案
   };
 }

src/views/book/courseware/data/newWordTemplate.js

@@ -114,5 +114,7 @@ export function getNewWordTemplateData() {
       answer_list: [],
     },
     multilingual: [], // 多语言
+    parse: '', // 解析
+    reference: '', // 参考答案
   };
 }

src/views/book/courseware/data/pinyinBase.js

@@ -98,5 +98,7 @@ export function getPinyinBaseData() {
       answer_list: [],
     },
     multilingual: [], // 多语言
+    parse: '', // 解析
+    reference: '', // 参考答案
   };
 }

src/views/book/courseware/data/recordInput.js

@@ -40,5 +40,7 @@ export function getRecordInputData() {
       },
     },
     multilingual: [], // 多语言
+    parse: '', // 解析
+    reference: '', // 参考答案
   };
 }

src/views/book/courseware/data/table.js

@@ -113,5 +113,6 @@ export function getTableData() {
     },
     multilingual: [], // 多语言
     parse: '', // 解析
+    reference: '', // 参考答案
   };
 }

src/views/book/courseware/preview/components/article/NormalModelChs.vue

@@ -513,7 +513,6 @@
                       "
                     >
                       <span class="NNPE-words-box">
-                        {{ curQue.property.pinyin_position }}
                         <template v-if="curQue.property.pinyin_position == 'top'">
                           <span
                             v-if="config.isShowPY"
@@ -1399,7 +1398,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 22px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 22px;
@@ -1470,7 +1469,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 22px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 22px;
@@ -1614,7 +1613,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 20px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 20px;
@@ -1677,7 +1676,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 20px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 20px;

src/views/book/courseware/preview/components/article/PhraseModelChs.vue

@@ -1338,7 +1338,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 22px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 22px;
@@ -1385,7 +1385,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 22px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 22px;
@@ -1510,7 +1510,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 20px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 20px;
@@ -1567,7 +1567,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 20px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 20px;

src/views/book/courseware/preview/components/article/Practicechs.vue

@@ -972,7 +972,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 20px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 20px;
@@ -1035,7 +1035,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 20px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 20px;

src/views/book/courseware/preview/components/article/Voicefullscreen.vue

@@ -1703,7 +1703,7 @@ export default {
 
           &.NNPE-pinyin {
             box-sizing: border-box;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 32px;
             font-weight: normal;
             line-height: 1.25;
@@ -1790,7 +1790,7 @@ export default {
 
         &.NNPE-pinyin {
           box-sizing: border-box;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 32px;
           font-weight: normal;
           line-height: 1.25;

src/views/book/courseware/preview/components/article/WordModelChs.vue

@@ -1107,7 +1107,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 22px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 22px;
@@ -1158,7 +1158,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 22px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 22px;
@@ -1288,7 +1288,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 20px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 20px;
@@ -1345,7 +1345,7 @@ export default {
 
       &.NNPE-pinyin {
         height: 20px;
-        font-family: 'GB-PINYINOK-B';
+        font-family: 'League';
         font-size: 14px;
         font-weight: normal;
         line-height: 20px;

src/views/book/courseware/preview/components/article/components/Notecard.vue

@@ -82,7 +82,7 @@ export default {
         &.NPC-notes-con-text {
           flex: 1;
           margin-left: 5px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
         }
       }
     }

src/views/book/courseware/preview/components/article/components/Practice.vue

@@ -451,7 +451,7 @@ export default {
         margin-top: 8px;
 
         > span {
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 20px;
           line-height: 24px;
           color: #2c2c2c;

src/views/book/courseware/preview/components/article/components/WordPhraseDetail.vue

@@ -933,7 +933,7 @@ export default {
             display: flex;
             align-items: center;
             margin-right: 8px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 20px;
             line-height: 30px;
             color: #2c2c2c;

src/views/book/courseware/preview/components/article/components/Wordcard.vue

@@ -504,7 +504,7 @@ export default {
     }
 
     > span {
-      font-family: 'GB-PINYINOK-B';
+      font-family: 'League';
       font-size: 20px;
       line-height: 24px;
       color: #2c2c2c;

src/views/book/courseware/preview/components/dialogue_article/NormalModelChs.vue

@@ -1029,7 +1029,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 22px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 22px;
@@ -1090,7 +1090,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 22px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 22px;
@@ -1182,7 +1182,7 @@ export default {
 
         .pinyin {
           margin-right: 4px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           line-height: 22px;
           color: rgba(73, 34, 34, 85%);

src/views/book/courseware/preview/components/dialogue_article/PhraseModelChs.vue

@@ -1084,7 +1084,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 22px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 22px;
@@ -1141,7 +1141,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 22px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 22px;
@@ -1219,7 +1219,7 @@ export default {
 
         .pinyin {
           margin-right: 4px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           line-height: 22px;
           color: rgba(0, 0, 0, 85%);

src/views/book/courseware/preview/components/dialogue_article/Practicechs.vue

@@ -1101,7 +1101,7 @@ export default {
 
         .pinyin {
           margin-right: 4px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           line-height: 22px;
           color: rgba(0, 0, 0, 85%);
@@ -1139,7 +1139,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 20px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 20px;
@@ -1194,7 +1194,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 20px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 20px;

src/views/book/courseware/preview/components/dialogue_article/RoleChs.vue

@@ -107,7 +107,7 @@ export default {
   .pinyin {
     margin-right: 4px;
     margin-left: 8px;
-    font-family: 'GB-PINYINOK-B';
+    font-family: 'League';
     font-size: 14px;
     line-height: 22px;
     color: rgba(0, 0, 0, 85%);

src/views/book/courseware/preview/components/dialogue_article/WordModelChs.vue

@@ -970,7 +970,7 @@ export default {
 
           &.NNPE-pinyin {
             height: 22px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 14px;
             font-weight: normal;
             line-height: 22px;
@@ -1023,7 +1023,7 @@ export default {
 
         &.NNPE-pinyin {
           height: 22px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           font-weight: normal;
           line-height: 22px;
@@ -1097,7 +1097,7 @@ export default {
 
         .pinyin {
           margin-right: 4px;
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
           font-size: 14px;
           line-height: 22px;
           color: rgba(0, 0, 0, 85%);

src/views/book/courseware/preview/components/image_text/ImageTextPreview.vue

@@ -107,6 +107,7 @@
         @changeTheme="changeTheme"
         :mp3Url="mp3_url"
         :multilingualTextList="showLang && multilingualTextList[getLang()] ? multilingualTextList[getLang()] : []"
+        :property="data.property"
       ></magazine-sentence>
     </el-dialog>
   </div>

src/views/book/courseware/preview/components/image_text/components/MagazineSentence.vue

@@ -24,6 +24,7 @@
             activeWordIndex === indexC
               ? 'active'
               : '',
+            indexC === 0 ? 'text-left' : '',
           ]"
           :style="{
             color:
@@ -38,7 +39,154 @@
           }"
           @click="palyWord(indexC)"
         >
-          {{ itemC.wordsName || itemC.onebest }}
+          <!-- {{ itemC.wordsName || itemC.onebest }} -->
+          <template v-if="itemC.isShow">
+            <template
+              v-if="
+                data[sentenceActive].wordsResultList[indexC + 1] &&
+                data[sentenceActive].wordsResultList[indexC + 1].wordsName &&
+                chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 1].wordsName) > -1
+              "
+            >
+              <span class="NNPE-words-box">
+                <span
+                  v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
+                  :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
+                  :style="{ fontSize: fontSize - 6 + 'px' }"
+                  >{{
+                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                      ? itemC.pinyin_up
+                      : itemC.pinyin
+                  }}</span
+                >
+                <span class="NNPE-chs">
+                  <template>
+                    <span>{{ itemC.wordsName }}</span>
+                  </template>
+                </span>
+                <span
+                  v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
+                  :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
+                  :style="{ fontSize: fontSize - 6 + 'px' }"
+                  >{{
+                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                      ? itemC.pinyin_up
+                      : itemC.pinyin
+                  }}</span
+                >
+              </span>
+              <span class="NNPE-words-box">
+                <span
+                  v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
+                  :class="[
+                    'NNPE-pinyin',
+                    noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
+                  ]"
+                  :style="{ fontSize: fontSize - 6 + 'px' }"
+                  style="text-align: left"
+                  >{{
+                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                      ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
+                      : data[sentenceActive].wordsResultList[indexC + 1].pinyin
+                  }}</span
+                >
+                <span class="NNPE-chs" style="text-align: left">{{
+                  data[sentenceActive].wordsResultList[indexC + 1].wordsName
+                }}</span>
+                <span
+                  v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
+                  :class="[
+                    'NNPE-pinyin',
+                    noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
+                  ]"
+                  :style="{ fontSize: fontSize - 6 + 'px' }"
+                  style="text-align: left"
+                  >{{
+                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                      ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
+                      : data[sentenceActive].wordsResultList[indexC + 1].pinyin
+                  }}</span
+                >
+              </span>
+              <span
+                v-if="
+                  data[sentenceActive].wordsResultList[indexC + 2] &&
+                  data[sentenceActive].wordsResultList[indexC + 2].wordsName &&
+                  chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 2].wordsName) > -1
+                "
+                class="NNPE-words-box"
+              >
+                <span
+                  v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
+                  :class="[
+                    'NNPE-pinyin',
+                    noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
+                  ]"
+                  :style="{ fontSize: fontSize - 6 + 'px' }"
+                  style="text-align: left"
+                  >{{
+                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                      ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
+                      : data[sentenceActive].wordsResultList[indexC + 2].pinyin
+                  }}</span
+                >
+                <span class="NNPE-chs" style="text-align: left">{{
+                  data[sentenceActive].wordsResultList[indexC + 2].wordsName
+                }}</span>
+                <span
+                  v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
+                  :class="[
+                    'NNPE-pinyin',
+                    noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
+                  ]"
+                  style="text-align: left"
+                  :style="{ fontSize: fontSize - 6 + 'px' }"
+                  >{{
+                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                      ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
+                      : data[sentenceActive].wordsResultList[indexC + 2].pinyin
+                  }}</span
+                >
+              </span>
+            </template>
+            <template v-else>
+              <span class="NNPE-words-box">
+                <span
+                  v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
+                  class="NNPE-pinyin"
+                  :class="[
+                    itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
+                    noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
+                  ]"
+                  :style="{ fontSize: fontSize - 6 + 'px' }"
+                  >{{
+                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                      ? itemC.pinyin_up
+                      : itemC.pinyin
+                  }}</span
+                >
+                <span class="NNPE-chs">
+                  <template>
+                    <span>{{ itemC.wordsName }}</span>
+                  </template>
+                </span>
+                <span
+                  v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
+                  class="NNPE-pinyin"
+                  :class="[
+                    itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
+                    noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
+                  ]"
+                  :style="{ fontSize: fontSize - 6 + 'px' }"
+                  >{{
+                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                      ? itemC.pinyin_up
+                      : itemC.pinyin
+                  }}</span
+                >
+              </span>
+            </template>
+          </template>
         </div>
       </template>
       <div class="NPC-notes-note" v-if="multilingualTextList[sentenceActive]">
@@ -113,7 +261,7 @@
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ['fontSize', 'sentenceTheme', 'data', 'activeIndex', 'mp3Url', 'multilingualTextList'],
+  props: ['fontSize', 'sentenceTheme', 'data', 'activeIndex', 'mp3Url', 'multilingualTextList', 'property'],
   data() {
     //这里存放数据
     return {
@@ -193,6 +341,8 @@ export default {
       audio: new Audio(),
       ed: null,
       activeWordIndex: null,
+      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '#', '、'],
+      noFont: ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '/'],
     };
   },
   //计算属性 类似于data概念
@@ -266,9 +416,27 @@ export default {
         this.$emit('changeTheme', index);
       }
     },
+    handleData() {
+      this.data.forEach((item) => {
+        item.wordsResultList.forEach((wItem, wIndex) => {
+          wItem.wordsName = wItem.wordsName ? wItem.wordsName : wItem.onebest;
+          this.mergeWordSymbol(wItem);
+        });
+      });
+    },
+    // 词和标点合一起
+    mergeWordSymbol(wItem) {
+      if (this.chsFhList.indexOf(wItem.wordsName) > -1) {
+        wItem.isShow = false;
+      } else {
+        wItem.isShow = true;
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.handleData();
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
@@ -358,15 +526,65 @@ export default {
     border-radius: 8px;
 
     .content-item {
-      // margin: 0 6px 0 0;
-      font-family: '楷体';
-      font-size: 20px;
-      line-height: 40px;
-      cursor: pointer;
+      display: flex;
+      padding-bottom: 6px;
+
+      .NNPE-words-box {
+        padding: 0 1px;
+      }
+
+      .NNPE-pinyin {
+        display: block;
+        min-height: 22px;
+        font-family: 'League';
+        font-weight: normal;
+        line-height: 1.4;
+        text-align: center;
+
+        &.noFont {
+          font-family: initial;
+        }
+
+        &.textLeft {
+          text-align: left;
+        }
+
+        &.textRight {
+          text-align: right;
+        }
+      }
+
+      .NNPE-chs {
+        display: flex;
+        display: block;
+        flex-flow: wrap;
+        font-family: '楷体';
+        line-height: 1.4;
+        text-align: center;
+
+        &.overActive {
+          background: rgba(0, 0, 0, 6%);
+        }
+
+        &.active {
+          background: rgba(222, 68, 68, 15%);
+        }
+
+        &.wordActive {
+          color: rgba(222, 68, 68, 100%);
+        }
+
+        .wordActive {
+          color: rgba(222, 68, 68, 100%);
+        }
+      }
 
-      // &.active {
-      //   font-weight: 700;
-      // }
+      &.text-left {
+        .NNPE-chs,
+        .NNPE-pinyin {
+          text-align: left;
+        }
+      }
     }
   }
 

src/views/book/courseware/preview/components/new_word/components/WordPhraseDetail.vue

@@ -849,7 +849,7 @@ export default {
             display: flex;
             align-items: center;
             margin-right: 8px;
-            font-family: 'GB-PINYINOK-B';
+            font-family: 'League';
             font-size: 20px;
             line-height: 30px;
             color: #2c2c2c;

src/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue

@@ -770,7 +770,7 @@ $border-color: #e6e6e6;
             }
 
             .pinyin {
-              font-family: 'GB-PINYINOK-B';
+              font-family: 'League';
               font-size: 12px;
               line-height: 20px;
               opacity: 0.45;
@@ -807,7 +807,7 @@ $border-color: #e6e6e6;
               padding: 4px 12px;
 
               .pinyin {
-                font-family: 'GB-PINYINOK-B';
+                font-family: 'League';
                 font-size: 16px;
                 line-height: 24px;
               }
@@ -826,7 +826,7 @@ $border-color: #e6e6e6;
             @extend %column;
 
             .brackets-text {
-              font-family: 'GB-PINYINOK-B';
+              font-family: 'League';
             }
 
             .brackets {