如何将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更改为我自己的下载字体

回答

相关问题