<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[Apao garden Mac Safari 修正紀錄]]> apao <apao@www.apao.idv.tw> Wed, 01 Jan 2025 07:33:15 +0000 https://blog.apao.idv.tw/post// 經由朋友介紹我的植物介紹網站才知道，在Mac中的網頁顯示有問題，於是我就花了許多時間去找，這只有Mac OS上才出現的問題。
https://plant.apaostudio.com/

問題狀況模擬：
網頁中負責畫面控制的CSS 中 article 中出現以下文字排列，但是在Windows電腦與Android手機顯示上，我卻沒有發現有任何問題。
在主題（theme）找了老半天，也查不出真相，於是採取檢查文法的方式，逐步找到問題CSS的地方，但所有CSS裡看不見關於以下的設定。
letter-spacing

▼十分像是被加入了魔法般，被強制設定了（模擬）
letter-spacing: 1em;

▼文字依照設定被均勻分布的感覺（模擬）
點擊在新視窗中瀏覽此圖片
▼也十分像是被這樣設定了（模擬）
letter-spacing: 10px;

▼在Safari與Chrome中（模擬）出現的狀況，當時忘記要紀錄問題畫面。
點擊在新視窗中瀏覽此圖片

於是我將CSS定義完整修正之外， article 設定修改成為以下，Mac中的Chrome修復了
letter-spacing: normal;

▼Mac中的Chrome中的顯示（但也有可能我少了「;」以結束CSS定義）
點擊在新視窗中瀏覽此圖片

再將CSS article設定修改成為以下，Mac中Safari也修復了
letter-spacing: 1px;

▼Mac中的Safari中的顯示
點擊在新視窗中瀏覽此圖片

▼SAMSUNG A53中瀏覽器的顯示
點擊在新視窗中瀏覽此圖片

▼SAMSUNG A53中Chrome的顯示
點擊在新視窗中瀏覽此圖片

▼Lenovo P3 WIN10中Chrome的顯示
點擊在新視窗中瀏覽此圖片

▼Lenovo P3 WIN10中Firefox的顯示
點擊在新視窗中瀏覽此圖片

▼Safari（iPad OS17.5.1）
點擊在新視窗中瀏覽此圖片

▼Safari（iPhone OS14.1）
點擊在新視窗中瀏覽此圖片

這困擾許多花友的顯示問題，就在這瞬間我解決了。

▼不過，Mac OS 在顯示UTF-8 的時候，字形還是有些遺憾，像是（蓪）草的字型，仍然沒辦法顯示很正常
點擊在新視窗中瀏覽此圖片
Tags - , , , , , , ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] Apao garden Mac Safari 修正紀錄]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment