添加自定义字体VS 2010 @fontface [英] adding a custom font to VS 2010 @fontface
问题描述
（只是作为一个测试模板添加自定义字体）
添加字体Gothic.TTd作为一个现有项目'到项目层面。然后在的site.css我补充
@字体面
{
FONT-FAMILY：世纪的哥特式;
SRC：URL（'GOTHIC.TTF'），
}
然后添加了这个字体家族给的site.css的身体，看看是什么样子的主页上：
体
{
背景色：#FFF;
边框顶部：固体10px的＃000;
颜色：＃333;
字体大小：.85em;
FONT-FAMILY：世纪的哥特式的Segoe UI，宋体，黑体，无衬线;
保证金：0;
填充：0;
}
还有什么我缺少的，如何生成需要的CSS？我从以下教程工作：
的http://markchouanard.com/post/25542393378/using-web-fonts-in-your-asp-net-mvc-application
的http://www.$c$cproject.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
任何人都可以提出什么，我能怎么办呢？感谢您的任何答复。
更新
我已经加入
＆LT;脚本类型=文/ JavaScript的SRC =GOTHIC.TTF＆GT;＆LT; / SCRIPT＆GT;
到_SiteLayout.cshtml文件...任何其他的想法表示欢迎？
时有必要在所有URL（例如，在<一个href=\"http://stackoverflow.com/questions/6238737/font-face-with-embedded-font-does-not-work?rq=1\">@font-face与嵌入字体不起作用）
我只有.TTF extesions：
GOTHIC.TTF
GOTHICB.TTF
GOTHICBI.TTF
GOTHICI.TTF
用分号替换逗号，并在字体家族名称中删除空白。
这样的：
@字体面
{
FONT-FAMILY：CenturyGothic
SRC：URL（'GOTHIC.TTF'）;
}身体
{
背景色：#FFF;
边框顶部：固体10px的＃000;
颜色：＃333;
字体大小：.85em;
FONT-FAMILY：CenturyGothic的Segoe UI，宋体，黑体，无衬线;
保证金：0;
填充：0;
}
添加其他URL会让你支持更多的浏览器。该.TTF足以为它在谷歌浏览器的工作。
更新
请与本尝试在独立.html文件，作为一种模板（它的工作对我来说）：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;风格＆GT;
@字体面
{
FONT-FAMILY：世纪;
SRC：URL（'GOTHIC.TTF'）;
}
身体 {
背景色：#FFF;
边框顶部：固体10px的＃000;
颜色：＃333;
字体大小：.85em;
FONT-FAMILY：世纪的Segoe UI，宋体，黑体，无衬线;
保证金：0;
填充：0;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; H1＆GT;的Hello World＆LT; / H1＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
如果这不工作，也许你应该尝试使用其他的.ttf。你可以找到一个在这里： http://www.1001freefonts.com/snacker_comic.font
Started a new asp.net website (razor v2) website in VS2010 (just as a test template to add a custom font)
Added the font 'Gothic.TTd' as an 'existing item' to the project level. Then in 'site.css' I added
@font-face
{
font-family: "Century Gothic";
src: url('GOTHIC.TTF'),
}
Then added this font family to the 'body' of site.css to see what it looks like on the home page:
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;
}
What else am I missing, how do i generate the css required.? I am working from the following tutorials :
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
Can anyone suggest what I can do now? thanks for any replies
UPDATE I have added
<script type="text/javascript" src="GOTHIC.TTF"></script>
to the _SiteLayout.cshtml file...any other ideas welcome?
Is it necessary to have all the URLS (example in @font-face with embedded font does not work ) I only have the .TTF extesions:
GOTHIC.TTF
GOTHICB.TTF
GOTHICBI.TTF
GOTHICI.TTF
Replace the comma with a semi-colon, and remove the empty space in the font-family name.
Like this:
@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;
}
Adding the other urls will let you support more browsers. The .ttf is enough for it to work in Google Chrome.
UPDATE
Please try with this in a "standalone" .html file, as a sort of template (it worked for me):
<!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>
If this doesn't work, maybe you should try with another .ttf. You can find one here: http://www.1001freefonts.com/snacker_comic.font
这篇关于添加自定义字体VS 2010 @fontface的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
