@ font-face和font-size

Question

下面的想法是第一個@ font-face用於Firefox，第二個用於IE，而Arial用於其他任何無法理解前兩個的東西。 它的全部工作除了我想在Arial的情況下給出不同的大小，並沒有想出這樣做的語法。

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.ttf"); format("truetype");
}

@font-face {
  font-family: TribecaIE;
  src: url("Tribec0.eot");
}

BODY
{
    FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}

Answer 1

我不相信這是可能的css單獨; 我們可能需要使用javascript。

如果Arial是活動字體，我們要做的就是指定不同的字體大小。 檢測活動字體並不簡單，但這里有一種方法可以用於我們的特定目的。 我們可以創建一個包含一些Arial字符並測量其寬度的臨時元素，然后創建一個包含字符的第二個元素，而不指定字體（因此它默認為“活動”字體）並比較寬度。 這不會告訴我們哪個字體當前處於活動狀態，但可以指示其中一個嵌入字體是否加載了@ font-face，因為它們肯定不會與Arial具有相同的寬度。 如果兩個元素的寬度不相等，我們知道Arial無法加載，因此如果寬度相等，我們只會調整字體大小。

即使瀏覽器無法加載Arial字體，我們的測試仍然有效，因為當我們在測試期間指定Arial時，瀏覽器將默認使用與第二個元素相同的字體。 如果瀏覽器無法使用@ font-face加載嵌入字體，則兩個元素的寬度仍然相等。

如果有人希望我用代碼進一步說明，我會很樂意寫javascript。

Answer 2

普通的CSS規則不支持此功能。

我相信你的選擇

• css 3的font-size-adjust屬性
• javascript（jQuery），並檢查當前字體以查看三者中哪一個有效並相應地調整字體大小.. http://www.w3.org/TR/css3-fonts/#font-size-adjust （ 你還應該看看 http://www.modernizr.com/ ）

Answer 3

我相信這是（接近你所擁有的）：

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.ttf");
}

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.eot");
}

body {
    font-family: Tribeca, Arial;
}

IE將不知道如何打開ttf ，所以它不會打擾。 然后它將打開eot 。 然后，您只需在body聲明中按給定名稱指定字體。

Answer 4

通過知道哪一個讀取哪種類型的聲明來定位您的瀏覽器。 條件注釋加載不同的CSS調用。 然后你可以明確告訴每個人按規則做一些不同的事情。

還有typekit

Answer 5

@font-face {
    font-family: 'Tribeca';
    src: url(Tribeca.eot);
    src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
    }

MSIE將忽略最后一行因為它不理解format規則。 並且如上面的porneL所指出的， format()應該放在src屬性中。

local()將使支持瀏覽器使用本地字體文件，如果用戶擁有它而不是從您的服務器下載（並且可能使IE也忽略該行）。

至於字體大小的調整，正如Gaby所指出的：CSS 3 font-size-adjust。 但看起來它還沒有被廣泛支持。

Answer 6

要使用@ font-face使代碼重復無效，可以通過服務器端執行此操作。 如果你使用例如一些urlrewrite，檢測UA，如果它是IE - 返回帶有.eot擴展名的文件，如果它是普通瀏覽器 - ttf。

至於我，它很棒。

對於這種情況，您不應該更改您的css文件，只需要有2個文件：.ttf＆.oet。

Answer 7

雖然在使用CSS時它違反了正常的良好做法，但您可以在條件CSS中使用!important聲明。

例如，我們創建了兩個樣式表：“默認”樣式表，其中包含針對Firefox特定樣式的部分和Internet Explorer樣式表。

然后，使用導入樣式表的標准<link rel="" />方法：

<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">

<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->

在“默認”樣式表中，我們的Firefox樣式包含在以下內容中：

@-moz-document url-prefix() {

    #my-id { font-size: 100%; }

}

這是有效的，因為@-moz-document url-prefix()部分是Firefox插件樣式網頁的方式。 因此，其他瀏覽器不理解它，因此只是跳過它。

Answer 8

BODY
{
    FONT: 140% Arial;
    FONT: 195% Tribeca,TribecaIE;
}