Question

我想在我的应用中添加自定义字体，但它不起作用。这是字体位于

的路径

@font-face {    font-family: PF Din Text Cond Pro;
                 src: url('/fonts/JtNLnKEa.ttf'); }

字体位于system/fonts/JtNLnKEa

UPD

@font-face {
    font-family: PF Din Text Cond Pro;
        src: url('http://contrast-energo.ru/fonts/JtNLnKEa.ttf');
}

body,html { 
  font-family: PF Din Text Cond Pro;
  height: 100%; 
  min-height: 100%; 
  margin-top: 0px;
}

如何修复？

抱歉我的英文不好

Answer 1

将您的字体添加到CodeIgniter可访问的目录中。

@font-face {
  font-family: 'YourFontName'; /*a name to be used later*/
  src: url('http://domain.com/fonts/JtNLnKEa.ttf'); /*URL to font*/
}

并使用您的字体名称：

.classname {
  font-family: 'YourFontName';
}

编辑：

body,html { 
  font-family: "PF Din Text Cond Pro"; /* Add double quotes around your custom font name */
  height: 100%; 
  min-height: 100%; 
  margin-top: 0px;
}

Answer 2

@font-face {
  font-family:'Lucida Grande';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/6216.ttf) format('ttf');
}
@font-face {
  font-family:'Myriad Set Pro';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/myriad.woff) format('woff');
}
@font-face {
  font-family:'Helvetica Neue';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/helvetica-neue-medium.ttf) format('ttf');
}
@font-face {
  font-family:'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/helvetica-neue-medium.ttf) format('ttf');
}
body
{
    font-family:"Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
    overflow-x:hidden !important;
}

在根文件夹assets / css / fonts

中

Answer 3

你的申请结构应该是这样的

- application
- system
- assets
    - css
    - js
    - fonts

等..

然后您的访问网址应该像http://contrast-energo.ru/assets/fonts/JtNLnKEa.ttf

Answer 4

您的问题与CodeIgniter无关。您在CSS / HTML中遇到问题。

您需要使用以下CSS代码将您的字体正确添加到HTML文档中：

@font-face {
    font-family: 'PF Din Text Cond Pro';
    src: url('fonts/PF-Din-Text-Cond-Pro.eot');
    src: url('fonts/PF-Din-Text-Cond-Pro.woff') format('woff'), 
         url('fonts/PF-Din-Text-Cond-Pro.ttf') format('truetype'), 
         url('fonts/PF-Din-Text-Cond-Pro.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

自定义字体将显示在所有浏览器上。

如果您想将字体分配给body元素，可以使用以下内容：

body {font-family:'PF Din Text Cond Pro', Arial, sans-serif;}

您需要在单引号或双引号之间添加字体名称，因为它是自定义字体。

如果你只有一个＆＃34; .otf＆＃34;或＆＃34; .ttf＆＃34;字体文件，然后您需要将此文件转换为其他格式。

Online Font Converter是最好的免费字体转换器。

Answer 5

试试这个： 字体名称区分大小写。使用正确区分大小写的字体文件名。

我的字体文件名为Prata-Regular_0.ttf

所以我输入：

@font-face {
    font-family: 'Prata-Regular_0';
    src: url("http:// YOUR DOMAIN .com/assets/fonts/Prata-Regular_0.ttf"); 

}

不是这样：

@font-face {
   font-family: 'Prata-Regular_0';
   src: url("http:// YOUR DOMAIN .com/assets/fonts/prata-regular_0.ttf"); 
    
}

它有效……

自定义字体不起作用.Codeigniter

5 个答案: