2023-05-08

Google提供的免費繁體中文字體

關於繁體字型，google font並沒有直接將它的使用公開在google font api裡面，所以只能透過earlyaccess的URI來使用，以下紀錄的字體以及使用方式: 1. Google fonts – cwTeXKai (Chinese Traditional) 楷體字體 @import url('https://fonts.googleapis.com/earlyaccess/cwtexkai.css'); font-family: 'cwTeXKai', serif; 2. Googl...

更多資料

2017-05-17

將youtube embed的影品隨螢幕尺寸調整比例CSS解法

內嵌youtube影片或其他供應影音串流的平台最常遇到的就是iframe不知道寬高要設定為多少，尤其遇到響應式的狀況更是頭痛，今天搜尋了一下找到有個簡單的CSS解法，在這裡分享給大家。 HTML代碼 < div class="video-container">< iframe.......></iframe></div> 裡面的iframe就是我們用來內嵌的影音iframe, 我們在外面用個div把它包起來 CSS .video-container { position:relative; paddi...

更多資料

2017-02-14

用css讓圖片可以置中且保持比例縮放於指定框尺寸

HTML: <div class="frame"> <img src="foo"/> </div> CSS: .frame { height: 160px; /*can be anything*/ width: 160px; /*can be anything*/ position: relative; } img { max-height: 100%; max-width: 100%; width: auto; he...

更多資料

2016-12-31

Mac中 /usr/bin 的 Operation not permitted 解法

更新Mac OSX完後發現Ruby compass無法在Sublime Text 3下執行, 爬了一下文發現原來是更新的OSX加入了Rootless機制，用來防止惡意軟體程序攻擊，不過這確造成另一個困擾，就是軟體會因為權限的關係，很難在互相取用資源，所以可以透過以下方式將其關閉：先重啟電腦按下Command+R進入Recovery模式, 在Ｒecovery模式下執行Terminal然後執行下面指令 csrutil disable 如果事後要再恢復則可以執行： csrutil enable csrutil還有其相關設定項目，可參考需求進行微調整： csrutil ena...

更多資料

2016-11-10

CSS 垂直置中解法

關於CSS垂直置中的方法 HTML <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div class="ot"> <div class="wrapper"></div> ...

更多資料

2016-06-04

CSS製作六角形排版

SCSS #btn-group-wrap{ width:1025px; position:absolu...

更多資料

2016-02-01

關於zoom的問題

zoom可以直接以比例的方式將物件進行縮放，firefox不支援所以要用-moz-transform: scale()來取代 zoom和transform不同的地方在於，transform比較像是filter的感覺，實際上並不會改變物件的尺寸，只會針對物件進行比例縮放。 zoom就不同了，縮放後的尺寸會依比例改變，所以要看需求使用。此外，zoom在使用上必須要把物件的css屬性改成inline-block才可以正常地在IE取得相對尺寸，如: <div id="myZoomObj" style="display:inline-bloc...

更多資料

2015-11-09

CSS 計算寬度語法

透過calc來實現透過css計算百分比與像素單位做運算的語法: /* 最好預設一組高度，防止不支援calc語法的瀏覽器破版 */ height: 98%; /* Firefox */ height: -moz-calc(100% - 18px); /* WebKit */ height: -webkit-calc(100% - 18px); /* Opera */ height: -o-calc(100% - 18px); /* Standard */ height: calc(100% - 18px); ...

更多資料

2015-07-14

建立sublime text 2 sass 及 js 開發環境

1. 安裝sublime text 2, ruby, nodejs, 將npm及ruby指令集路徑填入system path參數, 如下: (安裝路徑請換成您安裝軟體的實體路徑) C:安裝路徑AppDataRoaming pm;C:安裝路徑Ruby22-x64in 2. 安裝 sublime pakage control manager 鍵入ctrl+或View>Show Console 然後把以下python code貼入指令視窗 import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf...

更多資料