---
# System prepended metadata

title: 當___的時候，F12 就對了
tags: ['2019-09-11', tutorial]

---

當___的時候，F12 就對了
===

當「哇！這個網站字型好炫砲，我想要！」的時候，F12 就對了
---
![](https://i.imgur.com/wLnBPIF.png)
實驗標的：https://3q.9527.tw/

按下 F12 之後，可以很清楚的看到它使用了什麼字體，
以及這個字體是在哪個css檔案中設定的：
![](https://i.imgur.com/vtsQmJm.png)

點一下`custom.css`，很快我們就找到我們要的字型路徑了：
![](https://i.imgur.com/xSkPAwB.png)


把相對路徑和網頁的連結合併一下：
```
https://3q.9527.tw/themes/8bit/fonts/HanPixels.woff2
https://3q.9527.tw/themes/8bit/fonts/HanPixels.woff
https://3q.9527.tw/themes/8bit/fonts/HanPixels.ttf
```

![](https://i.imgur.com/NnnuEGd.png)
字型GET!

當「這排版真礙眼，妨礙瀏覽體驗」的時候，F12 就對了
---
![](https://i.imgur.com/OnXAqS7.png)
實驗標的：http://www.masters.tw/157351

按下 F12 後，（語法不熟的人）會發現其實很難找到到底哪個才是該刪的節點，
這時可以對著想要刪除的區域案右鍵：
![](https://i.imgur.com/AOB8cqT.png)

瀏覽器就會幫我們找到該區塊的HTML：
![](https://i.imgur.com/kAar5pf.png)

開始刪刪刪！
![](https://i.imgur.com/4cKxsSB.png)
刪錯了沒關係 ctrl+z 可以復原。

刪完之後乾淨多了，但是還是有留白：
![](https://i.imgur.com/NX1Se8G.png)

接著把 css 的 padding 取消：
![](https://i.imgur.com/0mKMShn.png)

我們就得到乾淨的瀏覽畫面了！：
![](https://i.imgur.com/QkgE3UN.png)

當「什麼？你要我停用AdBlock？」的時候，F12 就對了
---
![](https://i.imgur.com/claJ5tb.png)
實驗標的：https://kk665403.pixnet.net/blog/post/404098046

開啟設定
![](https://i.imgur.com/Wt5qU4L.png)

勾選 `Disable JavaScript`
![](https://i.imgur.com/zFDIhkI.png)

重新整理網頁：
![](https://i.imgur.com/aak5d8J.png)

接著把容易造成視覺疲勞的背景禁用掉：
![](https://i.imgur.com/y6njTih.png)

再把一些感覺不愉快的小圖塊刪除掉就完成啦：
![](https://i.imgur.com/EDyiNmX.png)


###### tags: `tutorial` `2019-09-11`