網頁使用微軟正黑體bug

維克 (Vic Lin)-avatar-img
維克 (Vic Lin)
更新於 發佈於 閱讀時間約 1 分鐘

最近遇到客戶姓名中有"碧"這個字，發現後面會多一格空白:

raw-image

google了一下，改成用font-face的解法，發現碧後面還是會有一點點空格:

raw-image


既然這是微軟正黑體粗體的bug，就直接把粗體改掉吧，font-weight設為500，就正常了，或者是換別的字型也是一種解法。

raw-image


本筆記參考:
1. https://kira5033.github.io/2020/05/%E7%A2%A7%E7%AD%B5%E7%B6%B0%E5%9C%A8%E5%BE%AE%E8%BB%9F%E6%AD%A3%E9%BB%91%E9%AB%94%E5%95%8F%E9%A1%8C/
2. https://lininu.blogspot.com/2016/01/blog-post.html

留言
avatar-img
留言分享你的想法！
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
Vue 3.2 defineEmits 用法
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
Vue 3.2 defineEmits 用法
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
ASRock AMD DeskMini X300 超高CP自組筆記
前情提要 由於我的筆電已經用了10年，無法再戰下去了，且有預算考量，加上使用電腦幾乎都是定點，只有偶爾回家的時候會需要攜帶，因此最終選擇了迷你電腦，體積小不占空間，又方便攜帶，剛好符合我的需求。 菜單 由於這台無法裝獨顯，所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
ASRock AMD DeskMini X300 超高CP自組筆記
前情提要 由於我的筆電已經用了10年，無法再戰下去了，且有預算考量，加上使用電腦幾乎都是定點，只有偶爾回家的時候會需要攜帶，因此最終選擇了迷你電腦，體積小不占空間，又方便攜帶，剛好符合我的需求。 菜單 由於這台無法裝獨顯，所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3 使用 useFetch 取得數據
Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3 使用 useFetch 取得數據
Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
avatar-avatar
好好宅在家
設計師也蝦皮購－前陣子為工地買什麼？
家中修繕或裝潢想要找各種小零件時，直接上網採買可以省去不少煩惱～看看Sylvia這回為了工地買了些什麼吧～
#開箱#蝦皮分潤計畫#裝修工程
Thumbnail
avatar-avatar
好好宅在家
設計師也蝦皮購－前陣子為工地買什麼？
家中修繕或裝潢想要找各種小零件時，直接上網採買可以省去不少煩惱～看看Sylvia這回為了工地買了些什麼吧～
#開箱#蝦皮分潤計畫#裝修工程
Thumbnail
avatar-avatar
Chloe小窩
我的簡單生活練習：三款包包與日常小物開箱分享
👜簡單生活，從整理包包開始！我的三款愛用包＋隨身小物清單開箱，一起來看看我每天都帶些什麼吧🌿✨
#蝦皮#開箱#蝦皮分潤計畫
Thumbnail
avatar-avatar
Chloe小窩
我的簡單生活練習：三款包包與日常小物開箱分享
👜簡單生活，從整理包包開始！我的三款愛用包＋隨身小物清單開箱，一起來看看我每天都帶些什麼吧🌿✨
#蝦皮#開箱#蝦皮分潤計畫
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
徵才：創作者營運專員/經理（Operations Specialist）｜Creator Partnership 部門
創作者營運專員/經理（Operations Specialist/Manager）將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力，找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
#vocus#方格子#求職
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
徵才：創作者營運專員/經理（Operations Specialist）｜Creator Partnership 部門
創作者營運專員/經理（Operations Specialist/Manager）將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力，找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
#vocus#方格子#求職
Thumbnail
avatar-avatar
Lee Luciano的沙龍
星期三的CSS-CSSBattle#38
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
#分享#文章#背景
Thumbnail
avatar-avatar
Lee Luciano的沙龍
星期三的CSS-CSSBattle#38
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
#分享#文章#背景
Thumbnail
avatar-avatar
DavidHi的沙龍
SQL_解決語法更新中文顯示問號(?)的方法
在工作情境中手動執行SQL語法更新中文字時，有時會遇到中文字顯示問號(?)的情況。這篇文章將介紹如何解決手動執行SQL語法時造成中文顯示問號(?)的方法。
#SQL#語法#中文
Thumbnail
avatar-avatar
DavidHi的沙龍
SQL_解決語法更新中文顯示問號(?)的方法
在工作情境中手動執行SQL語法更新中文字時，有時會遇到中文字顯示問號(?)的情況。這篇文章將介紹如何解決手動執行SQL語法時造成中文顯示問號(?)的方法。
#SQL#語法#中文
Thumbnail
avatar-avatar
Warren Lo的沙龍
如何在多人工作站升級自己的 Python
IDE 升級後出現了一樣的錯誤，手上程式碼沒有 pylint black-format 檢查上不了 gitlab，我又點開了那個很小很小的 x 符號，裡面 logs 提示的解決方式是升級..
#python#venv#pylint
Thumbnail
avatar-avatar
Warren Lo的沙龍
如何在多人工作站升級自己的 Python
IDE 升級後出現了一樣的錯誤，手上程式碼沒有 pylint black-format 檢查上不了 gitlab，我又點開了那個很小很小的 x 符號，裡面 logs 提示的解決方式是升級..
#python#venv#pylint
Thumbnail
avatar-avatar
編織者的星空
注音輸入法設定
為什麼寫這麼基本的設定呢? 剛開始打字時預設內定為微軟注音，因為沒有全部設定好，導致後續寫稿時常常打錯字，也有是因為打注音時選錯字也有關。 雖然這個很基本，但也有滿多人不知道該怎麼設定，或常被微軟裡其設定繁雜而困擾，至少我找了一陣子......。 進入畫面右下方切換中英文(右鍵)，叫出IME工
#注音#整合#科技力
Thumbnail
avatar-avatar
編織者的星空
注音輸入法設定
為什麼寫這麼基本的設定呢? 剛開始打字時預設內定為微軟注音，因為沒有全部設定好，導致後續寫稿時常常打錯字，也有是因為打注音時選錯字也有關。 雖然這個很基本，但也有滿多人不知道該怎麼設定，或常被微軟裡其設定繁雜而困擾，至少我找了一陣子......。 進入畫面右下方切換中英文(右鍵)，叫出IME工
#注音#整合#科技力
Thumbnail
avatar-avatar
阿賢的沙龍
WIN10 微軟注音爆音 如何解決
打字爆音很討厭 三張圖教你怎麼解決 簡單不廢話 上圖!
#Win10#打字#安靜
Thumbnail
avatar-avatar
阿賢的沙龍
WIN10 微軟注音爆音 如何解決
打字爆音很討厭 三張圖教你怎麼解決 簡單不廢話 上圖!
#Win10#打字#安靜
Thumbnail
avatar-avatar
袋鼠Kangaroo's Blog
第一次安裝字體就上手！
「你是否覺得電腦的那些固定字體已經看膩了呢？」 「你是否覺得每次電腦只能用黑體、標楷體或是新細明體呢？」 那麼今天要來介紹一下，如何在網路上安裝其他的字體，以及介紹幾種安裝字體的網站唷～
#資訊科技#字型#下載
Thumbnail
avatar-avatar
袋鼠Kangaroo's Blog
第一次安裝字體就上手！
「你是否覺得電腦的那些固定字體已經看膩了呢？」 「你是否覺得每次電腦只能用黑體、標楷體或是新細明體呢？」 那麼今天要來介紹一下，如何在網路上安裝其他的字體，以及介紹幾種安裝字體的網站唷～
#資訊科技#字型#下載
Thumbnail
avatar-avatar
Vic Lin的沙龍
jsPDF中文亂碼
解決方法其實就是載入中文字型: 1. 到jsPDF的repo可以看到有fontconverter資料夾，裡面有fontconverter.html，選擇ttf字型檔，這邊以微軟正黑體為例: 2. 上一步會生成msjh-normal.js，在程式中要import(這邊是React)，接著設定這個字型
#jsPDF
Thumbnail
avatar-avatar
Vic Lin的沙龍
jsPDF中文亂碼
解決方法其實就是載入中文字型: 1. 到jsPDF的repo可以看到有fontconverter資料夾，裡面有fontconverter.html，選擇ttf字型檔，這邊以微軟正黑體為例: 2. 上一步會生成msjh-normal.js，在程式中要import(這邊是React)，接著設定這個字型
#jsPDF
Thumbnail
avatar-avatar
Vic Lin的沙龍
網頁使用微軟正黑體bug
最近遇到客戶姓名中有"碧"這個字，發現後面會多一格空白: google了一下，改成用font-face的解法，發現碧後面還是會有一點點空格: 既然這是微軟正黑體粗體的bug，就直接把粗體改掉吧，font-weight設為500，就正常了，或者是換別的字型也是一種解法。 本筆記參考: 1.
Thumbnail
avatar-avatar
Vic Lin的沙龍
網頁使用微軟正黑體bug
最近遇到客戶姓名中有"碧"這個字，發現後面會多一格空白: google了一下，改成用font-face的解法，發現碧後面還是會有一點點空格: 既然這是微軟正黑體粗體的bug，就直接把粗體改掉吧，font-weight設為500，就正常了，或者是換別的字型也是一種解法。 本筆記參考: 1.
Thumbnail
avatar-avatar
Kate的沙龍
個人網站1.3.0逐行解說
此版本的目標畫面成果是： ＊金色名字。 ＊金色社交按鈕圖示，點擊按鈕另開對應的網頁或著顯示comming soon。 ＊名字和按鈕在網頁中央，如果網頁寬度不夠會換行，夠就不換行。
#KotlinJS#程式設計#實戰
Thumbnail
avatar-avatar
Kate的沙龍
個人網站1.3.0逐行解說
此版本的目標畫面成果是： ＊金色名字。 ＊金色社交按鈕圖示，點擊按鈕另開對應的網頁或著顯示comming soon。 ＊名字和按鈕在網頁中央，如果網頁寬度不夠會換行，夠就不換行。
#KotlinJS#程式設計#實戰
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News