微調 font 文件並進階優化字體載入策略，以實現最快速度和最短 FOUT 表現 在之前的文章我們介紹了關於 system fonts 相對於 web fonts 的優點，與 system fonts 相比，web fonts 會對效能產生負面影響，使用更多數據並且增加網頁耗能，更是對 Google SEO 排名造成間接性的傷害。
什麼是 System Fonts / Web Fonts？System Fonts 顧名思義指的是作業系統內定的字型，因為來自於作業系統（也就是用戶的電腦、手機），不需要去特定網站（如 Google）抓取字體文件，也不需要將字體文件存在我們的網頁伺服器裡。而 Web Fonts 則是儲存於網頁伺服器的字體文件，瀏覽器會在渲染畫面時下載當前網頁指定的字體。在一天之內，瀏覽各種網頁可能會下載成百上千個這樣的文件。 其中一些甚至可能是相同的字體，來自不同的網站。
在使用下拉選單或者是彈出視窗的時候、我們常常會需要一個功能：點擊元件外部來關閉元件。在接下來的範例中，我們要示範如何使用jQuery實現點擊div以外的地方來關閉div。首先、我們先準備好html的部份，我們要做一個按鈕和一個div方塊。按下按鈕就可以顯示或隱藏div。並且在div顯示的狀態下，點擊div以外的地方就可以隱藏它。
Web Share API 是現代瀏覽器提供的功能之一，它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。以下我們分成三大主題來為各位介紹 Web Share API 的基本使用概念，什麼是 Web Share API呢？Web Share API 的限制是什麼呢？Web Share API 要如何使用？
bootstrap-table.js 是一個以bootstrap為基礎的表格外掛。可以對表格的資料進行排序、分頁、查詢等等。這篇文章要簡單的介紹如何設定bootstrap-table.js的中文化呦！因為bootstrap-table.js是以bootstrap為基礎開發的套件，因為我們必須先載入bootstrap。另外bootstrap-table使用了font awesome作為預設的圖標，因此我們也需要找入font awesome.一起來看看吧！
在javascript中我們常常使JSON格式做資料交換，所以我們常常使用JSON.parse來把字串轉為物件再做使用，但是有一個問題會造成你轉出來的資訊與你期望的產生差距，讓我們用一個簡單的範例來重現這個問題吧！那就繼續往下看囉！
這篇文章要來分享如何使用Javascript實現複製到剪貼簿的功能呦！那就跟著以下操作教學，一起來試試吧！
jquery.qrcode.js 是純前端的jquery 外掛，可以輕鬆在網頁上生產QR code。整隻檔案不到3k。最小化之後更是只剩下1點多K。這篇文章要跟大家分享如何使用jquery.qrcode.js。
本篇文章將來教大家關於Sass Map的應用，來提升工程師在開發與維護程式時的品質，跟著歐斯瑞手把手的教學，一起來看看吧。
CSS 預處理器產生了一種新的語言，而核心理念是用一種專門的程式語言，為 CSS 增加一些程式設計的的特性，無需考慮瀏覽器的兼容性問題，例如可以在 CSS 中使用變量、簡單的邏輯程序、函數等等，讓開發者就只使用這種語言進行編碼工作。簡單來說，CSS 預處理器用一種專門的程式語言，進行 Web 頁面樣式設計，然後再透過編譯轉為正常的 CSS 文件。
又來到了歐斯瑞的前端開發教學系列，今天要與大家分享如何使用CSS隱藏數字輸入框的小箭頭，並附上codepen範例方便讀者們做使用，一起跟著我們來學習吧！
bootstrap-table.js 是一個以為bootstrap為基礎的表格外掛。可以對表格的資料進行排序、分頁、查詢等等。本篇文章將簡單的介紹如果套用bootstrap-table.js到表格上，進行排序。
