有沒有瀏覽器外掛程式可以直接檢視網頁上的某段文字是什麼字型的?

時間 2021-05-11 23:27:25

1樓:老男孩

老問題了,SO 上有答案,鏈結戳 這,或者見下圖,以 chrome 為例,選中文字,檢查元素,選擇 Computed 拉到最底,比如前面 「答案」兩個字,知乎實際渲染字型就是微軟雅黑,跟 font-family 當然是不一樣的。

2樓:智子2號

上面有人說用類似Chrome:審查元素或者firebug等瀏覽器工具,其實不能完全解決樓主問題。相當於檢視css原始碼,但只能知道執行的css原始碼,經常會是下面圖中的情況:

css中往往定義了多個字型:NexusSerif,Georgia,serif,實際上並不能知道瀏覽器實際執行顯示的是哪乙個字型,因為字型顯示的規則是:如果找不到第乙個字型,就顯示第二個字型,以此類推到最後,如果還找不到,一般呼叫預設字型。

最簡潔的辦法:複製到word裡,檢視字型,如下圖,實際字型不是css中的第一位,而是第二位的Georgia:

3樓:賀師俊

目前也許沒有,但是我之前考慮過這個問題,並打算做乙個(雖然初衷並非做這樣的外掛程式,而是檢測到底使用者的電腦上有沒有某種字型,但思路上是可以拓展的,也完全可做成外掛程式)。不過我一向是挖坑不填的,所以下面說下思路,有興趣的同志可做一下。

其實思路是挺簡單的。要知道到底乙個字是什麼字型,要麼你能直接訪問到字型引擎,要麼就是靠截圖對比!前者在瀏覽器上你就甭想了,但是後者可以辦到。

對於較新瀏覽器來說,用 Canvas Text API 就可以了。

就本題需求而言,你要首先選中網頁上的某個待檢測的字記為 c,然後取到該元素的 computed style 中的字型設定記為 f。

建立乙個 canvas 及其 context,設定 context.font 為 f,然後用 context.fillText(c) 畫到 canvas 上,然後通過 context.

getImageData() 或者 canvas.toDataURL() 拿到 rending 結果的影象資料,就可以去對比了。

在伺服器端你建立乙個字型資料庫,儲存你能收集到的各種字型。得到客戶端發來的影象資料和可能的字型列表(即 f 的列表),然後逐個嘗試對比。當然也可以做成雲服務之類的。

注意,實際繪製的影象可能受到反鋸齒、cleartype 之類的影響。要模擬各種配置下的字型 rending 結果就算可行,我估計也比較挫。我個人想象中比較ok的方案是,畫大字型,比如 72px 大小的,然後比較演算法上稍做容錯處理即可。

實際上,還有乙個方式,甚至不需要伺服器端的介入!

因為可能的字型就是 CSS 所設定的 font-family 列表中的字型,或者是 fallback 。我們可以這樣:

做乙個 web font 作為對比字型記為 FakeFont,所有的字元都顯示乙個相同的不可能在其他字型中出現的奇怪圖案即可。

假設 font-family 是:Helvetica, Arial, sans-serif 。

我們先測試 Helvetica, FakeFont 。

如果兩個 rending 結果一致,那麼就是 Helvetica。

以下類推。

如果沒有乙個匹配,那麼就說明是 fallback。

當然,即使知道是 sans-serif 或者 fallback,你也不清楚具體是什麼字型。sans-serif 本來就是你的瀏覽器設定的。而 fallback 取決於你的瀏覽器和 OS。

但是就本需求而言,你其實想知道人家用了什麼字型,所以是無所謂的。以上。

4樓:梁海

可能沒有那麼理想的工具。

如果只是想知道網頁上的文字「應當」或「可能」是什麼字型,那麼可以用直接用 Chrome 或任何瀏覽器的開發者工具(Inspector)檢視該元素的 CSS font-family 屬性,或者用 @柳成蔭 的 WhatFont Tool 之類的工具。這就是不懂字型的普通開發者通常理解的「某段文字是什麼字型」了。

但顯然,這些方法無法探明:當某個字元不受 font-family 屬性指定的字型支援時,它 fallback 到了什麼字型。比如知乎、豆瓣、維基百科,你無法用以上方法直接探明頁面中的中文 fallback 到什麼字型了。

有沒有自動填驗證碼的瀏覽器外掛程式

Angry Bugs 驗證碼是為了區分人和機器防止自動提交的,所以驗證碼的設計上肯定是盡量扭曲變形,阻止機器自動識別。不過上有政策下有對策,有兩種方法可以攻破驗證碼 人工打碼平台。也就是說你把驗證碼發給他們,然後打碼平台的乙個大媽給你看看是什麼字元,然後再發給你。經過我的試用,成功率還是蠻高的。而且...

能在瀏覽器上直接摘錄批註的外掛程式有哪些推薦?

強烈推薦一款Firefox外掛程式 Textmarker功能簡單而不失強大 1.高亮選中的文字,還支援快捷鍵操作 2.重新開啟網頁時能保留之前高亮的文字 3.支援一鍵匯出乙個網頁上所有的高亮文字注意,它不能完成除標記以外的其他任何標註功能,如批註 圈點等。不過仍然非常實用,堪稱網頁摘抄好幫手 逛知乎...

vue js的單檔案元件可以直接瀏覽器載入嗎?

把你寫的 VUE 元件,包括標籤 可以放到中 註冊元件的方法 僅在元件裡使用的CSS,分離到乙個新的html去就行,然後通過AJAX 如jQuery的load 載入到頁面的乙個隱藏標籤中去。你就是得自己控制一下元件的載入順序就是了。可能除錯會有些麻煩,你可以在原來的頁面上自己測試好了再分離過去。如果...