解決iphone、ipad 無法顯示自訂英文字體的問題

解法說明：https://stackoverflow.com/questions/9351352/font-not-getting-applied-in-a-web-site-viewed-in-ipad

線上產生自訂英文字形的 svg 字體檔：https://www.fontsquirrel.com/tools/webfont-generator

簡單來說，iphone系列不吃普通 .ttf 字體格式，所以你把這個丟到自己空間，只有一般電腦跟安卓系列手機會正常顯示你要的字體。蘋果系列手機跟平版使用 iOS devices 只吃 SVG format font files，就會 GG。

不過我在測試的時候遇到很奇怪的事情，後來回去看 stackoverflow 裡面，解答者底下有人的回覆。我懷疑我們遇到的是類似的狀況。

簡單來說就是我套用失敗，但我的狀況比較奇葩，就是我用線上svg字體產生檔他產生的範例檔案，在ipad上確實可以正常顯示。但是我套用到我自己的網頁的時候，卻又一直卡關。我交叉測試確認路徑是否正確，跟電腦還有安卓手機吃到的是否是我產生出來的檔案，都確認沒問題，但就是 ipad 上怎麼看都看不到，用無痕視窗開也一樣。

stackoverflow 裡面有人回說
We tried out the solution.. Still its not working… How ever its showing a default font not the original “whitney” font
Well.. we figured it out on our end itself.. the corresponding font “.otf” file fixed the problem.. thought of sharing it others.. (BTW svg didn’t worked for us)

我猜他可能遇到的狀況跟我類似。然後他們後來改用 .otf 的格式解決。

所以結論是有兩種解法

  1. 轉成 SVG format font files ，用上述工具會轉出 .woff 跟 .woff2 兩種。然後我測試的結果是如果手機曾經連到該網頁，莫名的還是會吃不過去。後來換瀏覽器好了以後才都好。感覺是 iphone 針對字體的快取這塊吃的有點難清除的感覺。
  2. 轉成 .otf。但這方法我沒用，所以不知道效果如何。

大概是這樣。

blogger 套用付費樣版 & 自訂 amp 版本

最近接了幾個案子都用 blooger ，有些之前不知道現在才知道原來可以這樣的東西記錄一下。

[教學] 自訂 Blogger 行動版範本與自適應設計原理

我本來以為 AMP 版本是自帶不能改。但看這裡寫是可以，只是要先從「主題 > 行動服務」那裡切換。他可以切換成不要用 AMP，直接用網頁本身手機版（其實就還是電腦版啦，只是有做RWD的顯示就會是手機版），或是用 AMP 但可以自訂樣版內容，但就要在行動版內的「主題」選擇自訂。這樣在自訂範本的時候，裡面才匯出現對應的原始碼讓你自己調整。

wordpress 架站樣板哪裡買？外掛推薦與踩雷紀錄

最近很常用 wordpress 架站，也因此用了一些 plugin 跟踩到一些以前沒踩過的雷。趁還有印象做一下紀錄

【web theme 網站樣板去哪買】

如果你跟我一樣主要要架的是「媒體站」，推薦可以到 wordpressplugintheme 買樣板，比起其他站他的樣板選擇其實不多，但重點是很便宜且沒有限制只能使用在幾個網址上。我這次幾個站都用 Newspaper9 這個樣板，可調整性蠻高的。因為在這裡買 theme 或 plugin 便宜太多，之後別的站我應該會考慮在這裡買一些 plugin 來玩玩試用。

【plugin 外掛要裝哪些？】

因為這次有個業主有一些要求，所以我有特別多找了一些外掛。但也因為以前沒裝過，踩了一些雷，在這裡就一起記錄一下。這裡我只列自己額外裝的，搭配樣板 Newspaper9 必要裝的我就不在這裡列出。

有雷外掛

All In One WP Security

有雷是後來發現裡面有個防火牆的設定，造成google機器人完全無法爬網站以至於不收錄內容。這根本宣判網站死刑….一開始我完全搞不清楚為什麼，跑去找 seo 大手朋友求救。後來自己重新去比照兩個站，想到有問題的站有多裝這個外掛，就去用英文搜了一下找到這篇 AIOWP security plugin blocks google from indexing site.

bingo！跟我用一樣的外掛，遇到一樣的問題。不過我沒有停用這個外掛，因為這個外掛有很多功能，讓我可以裝了他一個就夠。後來有找出擋掉 google bot 的設定大概在哪裡，最後解決問題。這裡來說說為什麼我還是保留這個外掛。

  1. 調整 .htaccess 加強網站安全性
    這是這個外掛最大的優點，他有很多設定，設定完他會給你一個數字，讓你知道現在整個網站的安全性提升到什麼程度。像我不是工程師，對 .htaccess 根本不熟悉，但其實在 .htaccess 增加一些調整，可以提高 wp 網站的安全性。這時候這個外掛就很方便，後台直接提供圖形介面，讓你勾一勾選一選就可以設定完畢，不用去了解語法要怎麼寫。
  2. 方便的匯出匯入功能
    直接提供 .htaccess 跟 wp-config.php 的匯出匯入功能
  3. 提供後台防護的相關功能
    我這裡直接寫我透過這個外掛設定跟可以查看的幾個東西

    • 隱藏 WP version info：不要讓人輕易就知道你這個站是用哪個版本的 wp 架設的
    • 限制後台最多連續登入次數
    • 設定強制登出時間
    • 查看目前有登入的帳號，可手動強制把這些帳號登出
    • 所有帳號的登入紀錄
    • 把預設wp-admin網址改成別的
    • 在後台登入加上 google 驗證碼：要自己先去申請 google api 金鑰，回來這裡勾選填寫後，後台就可套用 Google reCAPTCHA

這幾個是我覺得這個外掛好用且方便的地方，因為如果不是用這個外掛，我得另外找別的好幾個外掛才可以把上述設定都處理好。用這個外掛一次就可以解決很方便。

但這個外掛實際上可以做的設定更多，這個就請要裝的自己去研究吧！

然後踩到雷的部分，我後來推敲應該是在 firewall 那裡的設定，但因為我實在是太害怕網站不被 google 收錄了，所以這部分我索性直接把防火牆裡面所有設定都讓他恢復預設，就是都沒有勾，等於不設防火牆。這樣做以後 google 收錄的部分就恢復正常。但至於到底是哪些設定造成擋掉，我沒有那個實驗精神所以也不確定。只能說確定一定是 firewall 裡面的設定造成的。

所以這個外掛我還是會推薦下載安裝，只是設定的時候自己要多注意。

無雷外掛

Cloudflare Flexible SSL

最近我手上兩個媒體網站都是在 linode 上架站，使用 cloudflare 的免費 ssl。但是在 wp 上使用 cloudflare 的免費 ssl 是會有雷的。簡單來說就是如果直接使用 Cloudflare Flexible SSL ，會出現幾種狀況：

  1. 整個網站只要切到 https 路徑就會完全不對，以致於 css 跟 js 都會路徑錯誤，造成跑版跟使用不能。
  2. 網站無限 loop 死掉：如果自己在網站上用 .htaccess 強制把 http 轉 https，並且使用 Cloudflare Flexible SSL 的時候會發生。

我手上兩個站一個遇到1一個遇到2，兩者使用的解法也不同，基本上擇一種方法使用即可。在這裡簡單寫給大家參考，詳細的就請自己去找 cloudflare 的說明囉。

  1. 使用 Flexible SSL：如果要用這個SSL，必須要搭配使用 Cloudflare Flexible SSL 外掛
  2. 使用 Full SSL：如果不另外弄外掛，另外一種解法是自己主機上要先用自簽CA搭配 .htaccess 強制把 http 轉 https，然後使用 Cloudflare Full SSL。參考文章「使用 CloudFlare SSL 憑證後出現過多重新導向的問題」
  3. 其他參考：使用 Really Simple SSL 外掛：這個方法我沒用過，但是寫這篇文章的時候搜到。放在這裡給大家參考看看。參考文章「WordPress使用CloudFlare免費SSL快速教學」

Google XML Sitemaps

這是無心插柳裝的，但推薦裝一下，簡單來說就是自動生成可以提交給 google 的 sitemap，還不錯用。

Heartbeat Control by WP Rocket

因為一開始裝的時候發生一些狀況，所以去找了幾個跟效能調校有關的 plugin ，這是其中之一。參考文章「WordPress 效能調教心得」。下載外掛

Hyper Cache

網頁快取外掛，加速瀏覽者讀取網站的速度，同時可以降低主機負擔。
參考文章「Hyper Cache 效果非常好的WordPress快取外掛！」

Revision Control

wp有自動把文章不斷儲存版本的功能，但是我覺得這個實在太吃空間跟效能了。所以找了這個，可以自訂要儲存幾個版本，以及手動把多餘的版本刪除。

Simple Tooltips

因為網站文章有註解的需求，最後選了這個，簡單好用。

After effect 要怎麼做到重複動畫而不用重複設定關鍵影格？

我想說flash有這種東西 after effect 應該也有。果不其然。

不過我還沒實作過，先記錄一下做法：

  1. 選擇要重複的圖層，在前面關鍵影格碼錶上，按alt（mac上是option，影片裡面寫的有錯）+左鍵，就會顯示出 expression （中文翻譯是表達式）的視窗。
  2. 在視窗內輸入 LoopOut(“cycle”,0);  即可。

感覺就跟 flash 的 as 差不多，就是可以用語法讓他比較方便處理一些重複的東西，而不用動畫慢慢刻。只是 flash 因為元件有分三種，所以重複動作在 flash 裡面不用透過 as 就可以做得出來。這點 flash 操作上會簡單一點。不過 ae 的用表達式來處理在邏輯上After effects 是比較「漂亮乾淨」

動畫設計軟體：After effects 與 flash 比較

最近大量的在使用 After effects （Ae），然後一邊調整自己的某些以前用flash（Fl）的習慣。

簡單來說，Fl 的操作邏輯有點綜合 Ae+Ai+Pr 。但真的就功能細節來說 Fl 大概就是每個都到70分的綜合體。

Ae 最強的是在動作的補間動畫特效要複製到其他圖層的時候非常快速，真的就是選取/複製/貼上就好。在 Ae 裡面的參數化設定很一致。Fl 因為他設定的方式等等的限制，在這部分反而不如 Ae 方便。

但是因為 adobe 旗下最強的向量繪圖是 Ai ，所以 Ae 本身的繪圖功能就直接讓他非常的陽春，主要就是可以畫一些不用分層的色塊。複雜的就要從 Ai 匯入。因此所有要出現在舞台上的「角色」，要在 Ai 先畫好，並且把要獨立的各個元件打散在不同圖層，這樣在 Ae 匯入的時候才好選取。

而 Fl 本身在繪圖就有一定的功能，所以用 Fl 做動畫的時候，連畫圖這件事都會直接在 Fl 完成。當初 Micromedia 被 Adobe 剛合併的時候，Ai 的圖檔要複製到 Fl 常會遇到貼過去如果維持向量檔案會變得怪怪的狀況。

而 Fl 的時間軸有點介在 Ae 跟 Pr 的中間，在 Ae 裡面，一個元件就是必須要獨立一個圖層，而且這個圖層的時間軸就只允許這個圖層存在。不能說某個時間點後，在同一層裡面改放別的元件。但是 Fl 是可以的（這也是為什麼 Fl 無法做到把圖層的補間動畫直接複製去給別人的原因吧）。 Fl 的時間軸有點像 Pr 。它既可以自己無限新增很多圖層，但同一個圖層的不同時間軸還是可以放置其他不同的元件。所以在做某些類型的效果的時候可以有一些偷吃步的做法。

但 Fl 的影片片段 / 圖像元件區隔，在製作一些重複動作的時候會很方便。例如小天使拍翅飛翔。拍翅膀的部分可以用影片片段做一個循環，然後放在主時間軸的時候他就會自動一直重複播放。但 Ae 沒有這種區隔，只有影片片段而且不會自動重播，影片片段多長放進去就只能拉到多長。所以目前看起來好像就是得自己做一段很長的重複播放的 comp 然後直接置入，這可能要再研究一下有沒有比較簡單的做法。

使用 google ads 關鍵字規劃工具 如何看到實際搜尋量

由於現在 google ads 關鍵字規劃工具免費版只提供看大概的搜尋量，但是他的大概範圍太大，例如他會寫「1000~1萬」這種，範圍大到對實際規劃的人來說幾乎毫無參考價值。

因為確定要下廣告才能查得到，最近剛好做了一個站上線，我想說就順便測試看看，在這裡紀錄一下。要從 google ads 關鍵字規劃工具看到實際搜尋量有幾個條件

  1. 要下廣告
  2. 下廣告的廣告要正式上線
  3. 但不是廣告上線就馬上讓你查。我測試的結果是上線三天後，才查的到實際搜尋量

那要下多少錢呢？因為下的費用他有兩種選擇，一種是自動扣款，一種是手動，手動的意思就是儲值，你可以看要存多少錢，廣告最多就扣完你存的錢為止。我是用手動，存了 1000 元進去跑廣告。廣告上線後前面兩天查的都還是「1000~1萬」這種，但是第三天開始，就查得到實際量，跟過去每月搜尋量了。

所以朋友說他都用 google ads 看，但就是要找金主（有在持續下廣告的）。然後因為後面我要做一點關鍵字研究的東西，我應該會考慮訂閱 keywordtool 這個服務一個月來玩玩，到時候再來寫心得囉。

 

js線上課程筆記

陣列的操作
push 跟 pop
舉例
var books=[“書本1″,”書本2″,”書本3”]
如果
books.push(“書本4”)
那陣列內容就會實質變動變成
[“書本1″,”書本2″,”書本3″,”書本4”]

如果再用books.pop()
這會把最後一筆資料移出，那陣列內容會變回
[“書本1″,”書本2″,”書本3”]

這兩的動作可以視為對陣列內容塞入最後一筆資料跟取出最後一筆資料，
所以都會異動到對陣列本體

Slice(開始,結束)切割
舉例
var numbers=[1,2,3,5,6]
他們實際儲存的位置為0,1,2,3,4,5
要注意Slice(開始,結束)裡面的開始結束，指的就是實際儲存的位置
然後切割出來的陣列，包含開始的資料，但不包含結束的資料
例如 slice(1,10)，意思是從1開始，到10之前不包含10的資料。

所以如果是numbers.slice(0,2)
那取出的資料就是[1,2]，不包含3
numbers.slice(-3,-2)
負數是倒數。倒數-3的資料是3，然後到-2停止，但不包含-2的資料
那取出來的資料就是[3]
number.slice(3)
那就是3開頭，沒有結尾。
那就是取3之後的資料。
取出的結果就是[5,6]

可以用在顯示前50筆留言。
例如假設有個留言陣列有1000筆是
message=[“a”,”b”,”c”,”d”,”e”,….]
那如果用 message.slice(0,50)
就是切出 0~49 位子的資料出來

Reverse 反轉
message.reverse()
就可以把陣列排序反轉。常用在留言，例如用時間先後排序。

Concat 接續
可以把兩個陣列接起來變成一個陣列
例如
var books = books1.concat(books2)
意思就是把books1後面接上books2，把接起來結果指定存到books陣列。

*****************************************

目前聽到課程第22單元的 6:55分。筆記之後會繼續補在這，最近在學js，強烈推薦hahow的「動畫互動網頁特效入門（JS/CANVAS）」，老師很厲害，抽象概念用舉例解釋得很清楚。

學js一些零碎筆記

用 sublime 練習，不想用 codepan。看教學影片提到可以用 console.log把運算結果先顯示出來，但是不知道在 sublime 上要怎麼叫出來。發現查這些東西真的要懂得怎麼用英文關鍵字找….後來打 sublime console javascript 才找到

這篇算寫得最清楚有圖文的：How to Create a Javascript Console in Sublime Text

要注意到語法上要改用 debug() 取代 console.log()

然後要執行就是按 cmd+B，程式碼執行結果就會在底下 console 視窗顯示