css @font-face doesn't work [duplicate]

假装没事ソ 提交于 2020-02-08 07:45:09

问题


I need to set a font family in my web page with thte @font-face, but I can't make it work propertly: This is the content of my css file

@font-face {
    font-family: knockout;
    src: url('../fonts/knockoutHTF27.ttf');
}

body {
    font-width: normal;
    font-size: 20px;
    font-family: knockout !important;
    color: #223041;
    text-align: center;
}

I've tried the same code in two diferent computers and it works pefercty in one of them but doesn't work in the other. What could be wrong?


回答1:


You should try with full embedding, with all the quotation marks. It clears possible malfunctions on different browsers/OS.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Then, use it like this:

body {
    font-family: 'MyWebFont', Fallback, sans-serif;
}

As mentioned in a previous answer, if needed, you can use http://www.fontsquirrel.com/ or one of other font-face generator services on the web, to get all needed font formats.




回答2:


Try after removing ''

src: url(../fonts/knockoutHTF27.ttf);



回答3:


You must use other font file format for different browesers not only .ttf, .woff, .eot. And check your path



来源:https://stackoverflow.com/questions/24695818/css-font-face-doesnt-work

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!