在我的网站上使用Telugu ttf

时间:2015-03-05 18:07:34

标签: css css3 svg webfonts true-type-fonts

我需要能够在我的网站上使用特定的泰卢固语字体。我有ttf文件,我生成了所需的.eot,.woff,.woff2和.svg文件。我按照下面网站上的说明创建了我的样式表,如下所示

@font-face {
font-family: 'sree_krushnadevarayaregular';
src: url('Sree Krushnadevaraya-webfont.eot');
src: url('Sree Krushnadevaraya-webfont.eot?#iefix') format('embedded-opentype'),
     url('Sree Krushnadevaraya-webfont.woff2') format('woff2'),
     url('Sree Krushnadevaraya-webfont.woff') format('woff'),
     url('Sree Krushnadevaraya-webfont.ttf') format('truetype'),
     url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
font-weight: normal;
    font-style: normal;

}

.badifont {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'sree_krushnadevarayaregular';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

https://css-tricks.com/snippets/css/using-font-face/

但是,当我使用我创建的新类时,文本不会显示在我期望的字体中。它使用我的机器上可用的默认Telugu字体。

我错过了什么?

2 个答案:

答案 0 :(得分:1)

我查了一下,发现了这个解决方案。

转到Google Fonts并输入字体名称。我需要的大多数字体都已经由Google处理。然后,您可以复制谷歌提供的标记并将其放入您的代码中。

所以我必须这样做

<link href='http://fonts.googleapis.com/css?family=Tenali+Ramakrishna|Sree+Krushnadevaraya&subset=telugu&effect=outline|3d-float' rel='stylesheet' type='text/css'>

然后我将我的样式表设置为字体系列中的字体名称为&#39; Sree Krushnadevaraya&#39;它起作用了。

答案 1 :(得分:0)

要检查的3件事:在所有字体文件中,删除空格,或者放置下划线而不是空格,例如:

 Sree_Krushnadevaraya-webfont.eot

然后在@fontface的代码中调整这些文件名。

然后在文本编辑器中打开您的svg文件。检查字体ID的内容 - 通常是第6行,<font id=...>

确保您在标签(#)后面使用了确切的字体ID名称:

 url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg'); 

然后确保再次上传所有字体和CSS。