徐嘉裕(Neil Hsu)的工作心得網誌!

由於原本Google提供的@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400&display=swap'); 會有阻塞渲染問題，導致 CSS 檔案載入變慢，瀏覽器必須先下載完 CSS，再解析到 @import，再去下載字體，這會增加網頁出現「空白字體（FOIT）」的時間。 基於效能優化，2026年建議改用CSS的@font-face自訂字體方法，也就是把字體放在自己的伺服器讓用戶載入網站字形，效能比@import方法要好，穩定性也更高，以下是完整建立@font-face方法說明。 1、先去fonts Google選擇需要的開源字體並下載 https://fonts.google.com/ 2、下載回來後解壓縮字形檔，因該是.ttf格式，建議改成 woff2格式會「比較穩」 .woff2 是現代瀏覽器標準壓縮過（小很多）Google Fonts 主力格式，以下網站可以更改字形副檔名格式 https://cloudconvert.com/ 點選Select File再選擇From my computer 選擇電腦中要改檔案的.ttf上傳後，選擇改為 woff2 Convert後等轉換完成，將.woff2 下載回來 3、在自己網站根目錄建一個fonts資料夾，然後吧字形檔貼入(例如cwTeXHei.woff2)，接者再fonts資料夾中建一個.htaccess 貼上以下防熱連設定，避免字形資源被人拿去白漂 RewriteEngine On # 只處理字型檔 RewriteCond %{REQUEST_URI} \.(woff2|woff|ttf|otf)$ [NC] # 空 referer 放行：直接開檔、本地測試、某些瀏覽器情境 RewriteCond expr "%{HTTP_REFERER} == ''" RewriteRule .* - [L] # localhost / 127.0.0.1 放行：只在目前主機就是本地端時成立 RewriteCond %{REQUEST_URI} \.(woff2|woff|ttf|otf)$ [NC] RewriteCond %{HTTP_HOST} ^(localhos...

Google行事曆有一個功能就是可以【設定和共用】，讓多人共同發佈事件在同一個月曆上，共同管理，例如建立了一個主行事曆，然後要讓A，B，C能同時在這主行事曆上發佈事件(新增/編輯/刪除)，方法很簡單的，首先，先要取得A，B，C的E-MAIL帳號 然後前往Google行事曆首頁，左下方的我的日曆，找到需要共同發佈事件的月曆，點選右邊的【行事曆選項】 會彈出視窗，選擇【設定和共用】 找到【共用對象】，下面有一個【新增使用者和群組】 點選後會彈出視窗，這裡輸入A，B，C的E-MAIL帳號(可連續操作)，下面的權限選擇【進行變更並管理共同設定】(或是按需求自定) 完成後點選右下角的傳送，這樣A，B，C就會收到共用日曆的邀請，點選郵件中的【加入共用日曆】就可以在主日曆中發佈事件 最後是A，B，C如果要將事件發佈在主日曆，建立事件時，左邊有一個行事曆的ICON及下拉選單，選單要選取主日曆的名稱，不然事件會發在自己的日曆上，主日曆不會顯示。 為了避免日後又忘記操作步驟，寫成工作紀錄保存，順便分享給有需要的朋友參考! 工作心得撰寫： 徐嘉裕 Neil hsu

大家最常使用Google行事曆的崁入網站模式應該是月曆模式，其實Google行事曆還有其他模式可以選，可以選擇預設顯示月/週/時間表 三種模式，設定方法如下： 1、先選擇->我的日曆設定->整合日期->點選自訂按鈕 2、會開啟新視窗，左邊有一個下拉選單->預設檢視模式，這裡就能選擇日曆要顯示的預設模式，共有月-週-時間表三種模式，預設是顯示月，如果要改成顯示時間表，就選擇時間表 然後複製右上方的內坎程式碼 如果想在網站首頁顯示-時間表模式的Google行事曆，吧複製的程式碼貼到首頁html結構中即可， 看要顯示什麼模式就自己選擇，非常實用的功能這裡跟大家說明一下。 工作心得分享： 徐嘉裕 Neil hsu

Google翻譯套件是可以崁在網頁上面讓user自行切換的網頁程式，目前雖然已經停止申請必須使用Chrome瀏覽器的內建翻譯功能，但如果是ie或是ff還是可以用Google翻譯套件，之前有寫過一個教學有需要的朋友可以參考看看!! https://neohsuxoops.blogspot.com/2018/12/googlejs.html 這些是前言，目前遇到需要處理的問題是如果網站是繁體中文，切換成英文或日文因為字元變多了，會導致版面變形，像下圖這樣： 文字都疊再一起了，物件也跑位了，所以必須寫一段code去偵測切換的語言來調整css的文字大小的字句間距，方法如下： //Google翻譯套件程式區 <div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'zh-TW', includedLanguages: 'en,ja,zh-TW,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); } </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> //判斷Google翻譯套件語言自定義css樣式區 <script> $(document).ready(function(){ $('#google_translate_element').bind(...

Google網頁翻譯套件是網站建置上常用的功能，點選可以翻譯網站的文字為指定的語言，原本是在Google翻譯頁面中就能申請套件， 但自從11月Google翻譯改版後沒多久，Google網頁翻譯套件的申請頁面也被關閉了，好朋友可以點一下原本申請的網站： https://translate.google.com/intl/zh-TW/about/website/ 因該會看到這個畫面，翻譯套件申請頁面GG了! 不過還好G大神還是有保留原本的JS翻譯程式及功能，但如果要使用就要自己稍作修改了喔!!原始碼如下： <div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: ' zh-TW ', includedLanguages: ' en,ja,zh-TW ', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); } </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 其中需要修改的地方為： 藍字的pageLanguage: 數值，這個是翻譯套件預設的語言。 紅字includedLanguages: 數值，這個是可以讓使用者選擇要翻譯的語言，用英文,區隔 問題是如何知道這些語言的編碼參數呢，像是什麼ja，en去哪找?這問題很好處理，進到Google翻譯網頁 https://translate.google....