Jupyter Notebook 更改字體、字體大小、行高


(廢話):今天在做實驗的時候遇到了一點問題,就問了問本科的室友,結果室友推薦我使用Jupyter Notebook來寫代碼,以前看其他同學使用過,但是一直在用Pycharm寫,需要的時候頂多是Debug看一下,直到今天室友展示了以后才決定使用這個工具。

寫在前面:由於本人之前自學過前端的東西,了解一些HTML語言和CSS相關的東西,所以想到了這個方法,另外自己的Jupyter Notebook是用Anaconda來安裝的,所以如果你不是使用annaconda來安裝的,這個方法可能不適用,安裝可以參考:https://www.jianshu.com/p/d3a5ec1d9a08

問題展示:

打開Jupyter Notebook后發現code區字體又丑又小,讓人一看就很不舒服,未更改之前如下圖所示(默認效果可能更自己的瀏覽器有關)

 

然后自己嘗試着上百度查找更改方案,結果基本都是讓你更改瀏覽器(Chorme)設置,但是我的瀏覽器默認Microsoft Edge,設置里也沒找到更改的,於是放棄了。。。。

解決方案:

1.首先需要找到這個文件:這其實就是一個CSS文件

 文件的位置:D:\Anaconda\Lib\site-packages\notebook\static\components\codemirror\lib 打開文件后是一些CSS樣式的屬性設置(為什么會是這個文件,后面會說)。

 2.更改樣式:打開文件后需要找到這部分代碼,這部分就是我們需要修改的部分,可以使用Ctrl+F的方式快速定位到這(為什么要選擇這部分,在后面總結也會說),接下來就可以更具自己的喜好更改了,不過我建議大家不要改動其他屬性,更改一下三個屬性足以滿足大家需求了。

 

 

font-family :字體樣式 

后面‘ ’中的就是目前的字體樣式,你可以更改為自己想要的字體,本人目前使用的是'Courier',效果如圖,在此推薦一些最適合程序員的10種字體

 

 

font-size: 字體大小

字體大小可以有兩種表示:px、百分比,具體效果可以看圖(使用Chorme測試)

 本人設置的是20px,設置字體大小后需要設置行高,否者會有重疊現象,20px效果圖:

 

 

line-weight:行高

行高設置不易過大,不然會很稀疏,在大多數瀏覽器中默認行高大約是 110% 到 120%,本人設置的是115%,效果如圖所示

 

 

總結:

1.本人的第一個博客,寫的是真的簡單,也是看了另一個本科室友開了博客才想起來寫的,附上這個逼的鏈接 湯達人

2.其實整個過程其實就是一個CSS樣式更改的過程,但是本人更改的只是Code框的部分樣式,我們定位到的文件中的這個位置,你會發現之前有一個提示:

 

看他的意思是讓你不要更改,但是你在瀏覽器中右鍵檢查這個網頁的代碼就會發現,它的class是codemirror,這部分就是編輯框的的內容,所以我大膽的嘗試了,大不了重裝,哈哈哈,結果!!!!work了=。=,這也是為什么我要找到這個codemirror的文件的原因,當然看到這個class我先想到的是CodeMirror,jupyter notebook本身就是一種在線式的編輯器,所以我直接在anaconda文件夾里直接搜索到了這個文件。

3.開發者模式查看網頁源代碼,能夠幫助你更好地認識前端,更多關於CSS樣式和前端的學習我牆裂推薦W3School 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM