如何將bootstrap.css字體家族HTML更改爲我自己的下載字體

我試圖找到如何做到這一點，至少this link差點讓我。但她/他正在使用鏈接更改字體。如何將bootstrap.css字體家族HTML更改爲我自己的下載字體

，但我已經用我自己下載的字體font converter（.eot雜項文件.SVG的.ttf .woff .woff2）

，我有style.css象下面這樣：

/* font converted using font-converter.net. thank you! */ 
@font-face { 
    font-family: "CataneoBT-Regular"; 

    src: url("./fonts/07323Cataneo.svg") format("svg"), /* Legacy iOS */ 
    url("./fonts/07323Cataneo.ttf") format("truetype"), /* Safari, Android, iOS */ 
    url("./fonts/07323Cataneo.woff") format("woff"), /* Modern Browsers */ 
    url("./fonts/07323Cataneo.woff2") format("woff2"); /* Modern Browsers */ 
    font-weight: normal; 
    font-style: normal; 
}

這是一塊我bootstrap.css HTML代碼：

html { 
    font-family: sans-serif; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
} 
body { 
    margin: 0; 
}

我舉的最相似的代碼是：

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('../fonts/glyphicons-halflings-regular.eot'); 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') 
    format('embedded-opentype'), 
    url('../fonts/glyphicons-halflings-regular.woff2') 
    format('woff2'), 
    url('../fonts/glyphicons-halflings-regular.woff') 
    format('woff'), 
    url('../fonts/glyphicons-halflings-regular.ttf') 
    format('truetype'), 
    url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') 
    format('svg'); 
} 
.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

但據我所知，這個代碼只是爲了顯示一些圖標

我不知道如何代碼更改爲顯示我自己的字體

來源

2017-07-18 Flix

您是使用編譯的代碼還是源代碼（LESS，SASS）？ –

你並不需要包含所有這些字體格式。 Woff足夠好。 http://caniuse.com/#feat=woff –

只需使用下列CSS的CSS文件bootstrap後，其中應包括..

@font-face { 
    font-family: <Your-font>; 
    src: url(<your-font-path>); 
} 
html, body { 
    font-family: <Your-font>, sans-serif; /*Specify your font name here*/ 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
}

來源

2017-07-18 05:28:14

本地字體本身的「@ import」怎麼樣？ – Jorg

@Jorg檢查更新的答案。 –

我編輯了我的文章更多詳細信息，可以使用兩次'@ font-face'嗎？ – Flix

在style.css的文件ü需要的字體家庭鏈接，讓您的字體路徑在SRC

@font-face { 
font-family: 'sans-serif'; 
font-weight: normal; 
font-style: normal; 
src: url('../fonts/sans-serif.eot') format('embedded-opentype'), url('../fonts/sans-serif.woff') format('woff'), url('../fonts/sans-serif.ttf') format('truetype'), url('../fonts/sans-serif.otf') format('opentype'), url('../fonts/sans-serif.svg#sans-serif') format('svg'); 
}

來源

2017-07-18 05:29:42 Santhoshkumar

我想將sans-serif字體更改爲我自己下載的字體而不是其他方式 – Flix

如何將bootstrap.css字體家族HTML更改爲我自己的下載字體

回答

相關問題