× 說心事 政治時事 生活 運動 汽車 機車 自行車 相機 科技 理財 旅遊美食 娛樂 健康 美麗時尚 人際關係 文學故事 關於《思書》
吃喝玩樂 關於《思書》


有誰知道為什麼 Curly Qoutes u2018 前後會有空白嗎?


紅寶鐵軌客
來關注...
關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書日報」就會匯總自動通知您,讓您更容易與作者互動。
x
紅寶鐵軌客
Rails 使用中,折磨中,享受中......
Victorian vintage round cut ruby engagement ring in 14k yellow gold 7mm center vs g h 984
    很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
     
    就,這會一點點,那會一點點⋯⋯
作者最新發佈的文章:
  • 真不該直接用 JavaScript...
  • Rails 如何過濾你要的 HTML tag 內容
  • 要用 Faraday 還是 Net HTTP 呢?
作者最近參與的討論:
  • Rails 常見資安陷阱與解決方法
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
Rails 使用中,折磨中,享受中......
2017/10/30
43   0  


Unicode u2018 跟 u2019,也就是英文稱為 Smart Quotes 或是 Curly Qoutes 的 ‘  ’ 一對寶,這是個很神奇的字符,當在特定狀況時,瀏覽器會在前或後面自己加“空白”,而且有問題的話,問題會發生在英文版作業系統中,而中文版不會有問題,我找了好久,在網路上都找不到答案,很多前端工程師前輩都有發現這個問題,有些人的解法就乾脆就把這兩個字元取代成 straight quote ,我不覺得這是一個好的解法,畢竟,這對“寶”在英文使用上,是有一定重要性的。

"This is a 'magic' book."

vs.

“That’s a ‘magic’ book.”

在英文的寫法中,下面用 curly quotes 才是正確的寫法,也好看多了。

在一陣亂試中,我發現這問題可跟 font 的設定有關,當它在以下的 font-family 下,它的前後面會有一個空白:

font-family: "Lucida Grande", "Songti TC", "Microsoft JhengHei", PMingliu, 新細明體, sans-serif;

可以看到 Curly Quotes 的前後有空白

 

但是,把 font-family 設成這樣,也就是在中文字型前,加一個很常用的英文字型,就不會了:

font-family: "Lucida Grande", Helvetica, "Songti TC", "Microsoft JhengHei", PMingliu, 新細明體, sans-serif;

Curly Quotes 的前後沒空白了

合理的猜測是當英文字型找不到時,瀏覽器開始用下一個指定的字體,而下一個如果是中文,在英文版的電腦環境中,就會有空白產生,但是為什麼呢?

看起來跟中文字體有很大的關係,但是到底是為什麼?是不是有能人能教導一下,先感謝了。

關於作者
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
 
就,這會一點點,那會一點點⋯⋯


標籤: font-family x 1 中英文 x 1 網頁字型 x 1 curly qoutes x 1 smart quotes x 1

分享:


參與討論!
x
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入