向 VS 2010 @fontface 添加自定义字体答案

【问题标题】：adding a custom font to VS 2010 @fontface向 VS 2010 @fontface 添加自定义字体
【发布时间】：2014-11-27 06:00:39
【问题描述】：

在VS2010中新建了一个asp.net网站（razor v2）网站（只是作为添加自定义字体的测试模板）

将字体“Gothic.TTd”作为“现有项目”添加到项目级别。然后在'site.css'中我添加了

@font-face
{
    font-family: "Century Gothic";
    src: url('GOTHIC.TTF'),
}

然后将此字体系列添加到 site.css 的“正文”中，以查看它在主页上的样子：

body
{
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Century Gothic", Segoe UI, Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

我还缺少什么，如何生成所需的 css。？我正在学习以下教程：

http://markchouanard.com/post/25542393378/using-web-fonts-in-your-asp-net-mvc-application http://www.codeproject.com/Tips/605568/Using-font-face-to-use-custom-fonts-in-web-pages http://weblogs.asp.net/sreejukg/archive/2012/05/23/using-custom-fonts-in-your-web-pages.aspx

谁能建议我现在可以做什么？感谢您的任何回复

更新我已经添加了

<script type="text/javascript" src="GOTHIC.TTF"></script>

到 _SiteLayout.cshtml 文件...欢迎任何其他想法？

是否有必要拥有所有的 URL（@font-face with embedded font does not work 中的示例）我只有 .TTF 扩展：

GOTHIC.TTF
GOTHICB.TTF
GOTHICBI.TTF
GOTHICI.TTF

【问题讨论】：

标签： c# asp.net fonts font-face webfonts

【解决方案1】：

用分号替换逗号，并删除字体系列名称中的空格。

像这样：

@font-face
{
font-family: "CenturyGothic";
src: url('GOTHIC.TTF');
}

body
{
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "CenturyGothic", Segoe UI, Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}

添加其他 url 将使您支持更多浏览器。 .ttf 足以让它在 Google Chrome 中运行。

更新

请在“独立”.html 文件中尝试使用它，作为一种模板（它对我有用）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
@font-face
{
font-family: "Century";
src: url('GOTHIC.TTF');
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Century", Segoe UI, Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

如果这不起作用，也许您应该尝试使用另一个 .ttf。你可以在这里找到：http://www.1001freefonts.com/snacker_comic.font

【讨论】：

同时删除字体系列名称中的空格。我已经更新了答案。
哦，好吧，我只需要它在 google chrome atm 中工作。再次感谢您的帮助，但不幸的是仍然没有快乐
删除了 layout.cshtml 页面中的并在 body 和 'font-face 中分离了 'Century Gothic' '...工作...再次感谢所有帮助