[WP主題] 2016前緣再續

使用期間:2016.12.02-2017.08.08

又是一個年頭。前一年贊助「金萱,新時代中文字型,培育新鮮台灣文字風景」募款活動得到的justfont一年VIP服務,過了一年也已經到期了。既是時候到了,那麼不妨再來改次版。

這次改版的版面配色,同樣來自前兩年十分流行的「色検索ファルベコローレ」──即是依輸入字詞自動產生相應顏色的配色工具。依據前一年所許下的,這次使用了這個網誌的網誌名稱來生產配色,也就成了這麼個綠色系的版面。

使用CSS及JS

  1. GitHub – cnKruz/kaleidoscope: kaleidoscope fork from codepen
  2. Animsition – A simple and easy jQuery plugin for CSS animated page transitions.
  3. Owl Carousel – OwlGraphic
  4. Highslide JS – JavaScript thumbnail viewer
  5. Font Awesome, the iconic font and CSS toolkit

使用素材

  1. 写真素材なら「写真AC」無料(フリー)ダウンロードOK

這次改版繼續的練習SASS/SCSS,依然還不是太能夠完全掌握,不過總的來說,要比以前熟悉的多;改版中碰到最大的問題,花了最久時間的,依然還是JS。

原先打算自己試著寫寫canvas,但若真的要寫出一些比較有趣的東西,大概再多練習個一年,還是不能夠,因而在這邊直接使用了codepen上的資源──我是想要嘗試做些修改的,可是完全看不懂……(艸)另外,Animsition這隻插件,若搭配目前最新版的jQuery(v3.1.1)將會無法正常顯示,頁面需要重新整理才能夠被載入。

關於字體的二三事

至於最讓我意外的BUG,則是發生在再也想不到的微軟正黑體上。這個主題在內文使用的預設字體是微軟正黑體,碰到連結則會將字體加粗,在這裡問題便出現了:

當使用微軟正黑體5.00、6.00、6.10、6.11以及6.12的粗體顯示「碧」、「筵」、「綰」字的右邊會多了大約一個全形空格的空間()

以前從未碰過這樣的錯誤,當我對著粗體的「碧」字及其右邊的大大的看似全形空格的間距,還真以為是當初輸入不小心留了空白,又或是斷行的問題導致。發現是字體本身的問題(而且至今都還一直被放置未被修復)時還蠻訝異的。XD

最初想到解決問題的方法,是在需要以粗體呈現的連結上,使用其他字體。我一開始選了Noto Sans TC──也被使用在這個主題的各級標題上──不過由於這個網誌中部分文章出現了日文漢字,而在Noto Sans TC中顯然日文的漢字是不被支援的,也因此只好放棄。

後來餵了餵狗(Google),參考了以下的方案,才解決了這個奇妙的BUG: