字體大小的按鈕和鏈接

我想這個簡單的html：字體大小的按鈕和鏈接

TEST FONT SIZE</br> 
<input type="button" value="test bytton" style="font-size:20px"> 
<a style="font-size:20px">test link</a>

，並發現這個按鈕的字體大小看起來比鏈接的，儘管風格的字體大小大。有人知道爲什麼樣式對鏈接和按鈕的工作方式不同，以及如何讓它們看起來像一樣？

來源

2009-09-30 Kate

字體大小是一樣的。但它看起來不同，因爲默認頁面字體不同於默認輸入字段字體。將兩個元素上的font-family設置爲相同，它們看起來相同。

我通常做的：

body, input, button, select, option, textarea { 
    font-family: ...; /* whatever font */ 
} 
body { 
    font-size: x%; /* whatever base font size I want */ 
} 
input, button, select, option, textarea { 
    font-size: 100%; 
}

，並得到了網頁和表單域一致的字體。

來源

2009-09-30 09:38:11 bobince

我爲鏈接和按鈕設置了相同的字體系列，並獲得相同的結果。按鈕和鏈接內的文字大小不同。 – Kate 2009-09-30 10:54:12

適用於我，在任何瀏覽器中。發佈你的確切測試用例不起作用？ – bobince 2009-09-30 11:29:59

好我需要這個以及它的作品...謝謝bobince – Ljubisa 2014-01-26 04:29:57

-4

您不應該使用太多的CSS按鈕，因爲它們的顯示取決於用戶的操作系統。

相反，您可以使用圖像。

來源

2009-09-30 09:14:10 brainfck

使用圖像不是多用途的。 – Kate 2009-09-30 10:49:17

看起來是一樣的我，在Firefox，IE6和Chrome測試：http://jsbin.com/oveze
請記住：

這取決於瀏覽器和它的默認值，並根據操作也可能不同系統。
通常，按鈕和輸入字段有不同的字體。也設置它。
如果沒有相同的顏色（背景和字體），消除鋸齒或ClearType可能會造成輕微的差異。

來源

2009-09-30 09:39:06 Kobi

在Firefox中，按鈕和鏈接的谷歌瀏覽器和Safari瀏覽器字體看起來真的一樣，但在IE（7+）和Opera不是！只要按鈕的樣式字體有很多問題，我決定用鏈接替換按鈕。感謝大家的回答。 – Kate 2009-09-30 11:11:57

如果你非常關心造型，當然，一個''鏈接會給你比按鈕更多的自由。但它不會表現完全一樣...... – Kobi 2009-09-30 12:08:13

只好在Chrome同樣的問題，後來想通了，關鍵原因是

body { 
    -webkit-font-smoothing: antialiased 
}

改變這

body { 
    -webkit-font-smoothing: subpixel-antialiased; 
}

固定它。

來源

2013-06-20 23:37:12 Ish

謝謝，我有一個類似的問題（鏈接使用'antialiased'設置，我的''tag使用'auto'）。 – MaxGabriel 2014-07-11 01:46:29

字體大小的按鈕和鏈接

回答

相關問題