將@ font-face用於Segoe UI字體

Question

我現在有一個小時的Google，而且我無法確定是否可以使用@ font-face使用Segoe UI字體。任何機構是否知道該字體的許可證是否允許我這樣做？

Answer 1

這個頁面上的字體不一樣。該頁面上的字體是Segoe UI Mono。據我所知，Segoe UI應該只出現在Microsoft Windows上。

Answer 2

如果沒有直接聯繫，您無法從Microsoft許可Segoe UI，您可以從Ascender Corp許可從Segoe UI的Microsoft網頁鏈接到的單色字體，但它與Segoe UI不同。

我會建議Open Sans作爲Segoe UI字體的替代品，它非常相似，並且有更多的開放許可用於webfont（該鏈接實際上是Google託管版本的字體） - 因此，您可以擁有Segoe作爲主要字體，然後在非Windows 7+系統上回退到Open Sans。

Answer 3

正如其他答案說明，Segoe UI不適用於非Microsoft或其代理商製作的網絡應用程序。要回答你的問題的稱號，不過，我想指出的是，微軟自己在其網絡應用，通過@字體面，如使用的Segoe UI，從Microsoft Surface 2 CSS：

@font-face { 
    font-family: 'Segoe UI'; 
    src: url('/surface/Assets/css/fonts/all/normal/segoeui.eot'); 
    src: url('/surface/Assets/css/fonts/all/normal/segoeui.eot?#iefix') format('embedded-opentype'), 
     url('/surface/Assets/css/fonts/all/normal/segoeui.woff') format('woff'), 
     url('/surface/Assets/css/fonts/all/normal/segoeui.svg#SegoeUI') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Segoe UI Semibold'; 
    src: url('/surface/Assets/css/fonts/all/semibold/seguisb.eot'); 
    src: url('/surface/Assets/css/fonts/all/semibold/seguisb.eot?#iefix') format('embedded-opentype'), 
     url('/surface/Assets/css/fonts/all/semibold/seguisb.woff') format('woff'), 
     url('/surface/Assets/css/fonts/all/semibold/seguisb.svg#SegoeUISemibold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Segoe UI Bold'; 
    src: url('/surface/Assets/css/fonts/all/bold/segoeuib.eot'); 
    src: url('/surface/Assets/css/fonts/all/bold/segoeuib.eot?#iefix') format('eot'), /* Wrong format will tell IE9+ to ignore and use WOFF instead. MSHAR-2822 */ 
     url('/surface/Assets/css/fonts/all/bold/segoeuib.woff') format('woff'), 
     url('/surface/Assets/css/fonts/all/bold/segoeuib.svg#SegoeUIBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Segoe UI Light'; 
    src: url('/surface/Assets/css/fonts/all/light/segoeuil.eot'); 
    src: url('/surface/Assets/css/fonts/all/light/segoeuil.eot?#iefix') format('embedded-opentype'), 
     url('/surface/Assets/css/fonts/all/light/segoeuil.woff') format('woff'), 
     url('/surface/Assets/css/fonts/all/light/segoeuil.svg#SegoeUILight') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

像Metro UI - that look exactly like Windows 8即使項目 - 使用OpenSans：

@font-face { 
    font-family: "Open Sans"; 
    font-style: normal; 
    font-weight: 700; 
    src: local("Open Sans Bold"), local("OpenSans-Bold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzJ1r3JsPcQLi8jytr04NNhU.woff) format('woff'); 
} 
@font-face { 
    font-family: "Open Sans"; 
    font-style: normal; 
    font-weight: 300; 
    src: local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff'); 
} 
@font-face { 
    font-family: "Open Sans"; 
    font-style: normal; 
    font-weight: 800; 
    src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hp1r3JsPcQLi8jytr04NNhU.woff) format('woff'); 
} 
@font-face { 
    font-family: "Open Sans"; 
    font-style: normal; 
    font-weight: 400; 
    src: local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 
} 

我會推薦OpenSans。

Answer 4

您可以在技術上使用「C：\ Windows \ Fonts \」文件夾中的任何字體創建Web字體。 在大多數情況下（包括Segoe UI），由於許可限制，您不允許執行此操作。相反，我會推薦Open Sans作爲Segoe UI的一個很好的選擇。

但是，如果你被允許這樣做，你可以按照下列步驟操作：

1. 從您找回您的字體的 「C：\ WINDOWS \ Fonts \中」 文件夾中。 （視窗）
2. 轉換字體到您的願望兼容性（TTF，EOT，SVG，WOFF）

3. 在它創建下面的代碼一個CSS文件中的任何其他格式：

   @font-face{ 
       font-family: 'FontName'; 
       src: url('path/to/webfont.eot'); 
       src: url('path/to/webfont.woff'), 
        url('path/to/webfont.ttf'), 
        url('path/to/webfont.svg') 
   } 
   

4. 現在在你的主要CSS文件中，使用「font-family」標籤來選擇你的網頁字體。

我會再次聲明其對網絡字體的有效許可證的重要性，購買許可證時，請確保您有使用的字體在網絡上的權利。一些字體可能帶有一個網頁字體包，其中的CSS和字體已經爲您準備好了。