【问题标题】:Using Telugu ttf in my web site在我的网站上使用泰卢固语 ttf
【发布时间】:2015-05-07 05:27:34
【问题描述】:

我需要能够在我的网站上使用特定的泰卢固语字体。我有 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/

但是,当我使用我创建的新类时,文本不会以我期望的字体显示。它使用的是我机器上可用的默认泰卢固语字体。

我错过了什么?

【问题讨论】:

  • 我将代码更改为使用<font face="Sree Krushnadevaraya">డే మొయిన్ తెలుగు బడి</font>,并将字体更改为我所期望的。但这可能只有在我在本地安装该字体时才有效??

标签: css svg webfonts truetype


【解决方案1】:

需要检查 3 件事:在所有字体文件中,删除空格,或使用下划线代替空格:

 Sree_Krushnadevaraya-webfont.eot

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

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

请确保您在标签 (#) 之后使用的是准确的字体 ID 名称:

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

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

【讨论】:

  • 谢谢米娅,但这并没有帮助。当我在标记上执行 F12 开发人员工具视图时,它显示字体系列是“sree_krushnadevarayaregular”,但它只是没有加载正确的字体。
【解决方案2】:

我又查了一下,找到了这个解决方案。

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

所以我不得不这样做

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

然后我将我的样式表设置为字体系列中的字体名称为“Sree Krushnadevaraya”,并且它起作用了。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-27
    • 1970-01-01
    • 2019-04-28
    • 1970-01-01
    相关资源
    最近更新 更多