来自 Google 网络字体的 Droid Serif 字体具有以下样式:
DroidSerif.ttf
DroidSerif-Bold.ttf
DroidSerif-BoldItalic.ttf
DroidSerif-Italic.ttf
Run Code Online (Sandbox Code Playgroud)
我想使用@font-face
CSS 声明在“Droid Serif”下导入所有这些样式,font-family
并使用该font-weight
属性来指定我是否想要粗体和/或斜体,而不必在不同的情况下分别导入它们font-family
:
@font-face {
font-family: 'Droid Serif';
src: url('../fonts/DroidSerif.ttf');
}
@font-face {
font-family: 'Droid Serif Bold';
src: url('../fonts/DroidSerif-Bold.ttf');
}
@font-face {
font-family: 'Droid Serif BoldItalic';
src: url('../fonts/DroidSerif-BoldItalic.ttf');
}
@font-face {
font-family: 'Droid Serif Italic';
src: url('../fonts/DroidSerif-Italic.ttf');
}
Run Code Online (Sandbox Code Playgroud)
这可能吗?
PS我已经尝试了每种谷歌网络字体的导入技术,但它们都不适用于IE 9。
我正在使用Google Web Fonts.除IE9外,所有浏览器都正确呈现字体.(我没有在早期版本的IE上测试过).
HTML:
<head>
<link href='http://fonts.googleapis.com/css?family=Yeseva+One' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
Run Code Online (Sandbox Code Playgroud)
Google字体文件内容:
@font-face {
font-family: 'Yeseva One';
font-style: normal;
font-weight: 400;
src: local('Yeseva One'),
local('YesevaOne'),
url(http://themes.googleusercontent.com/static/fonts/yesevaone/v6/wVgDKaRrT3DN9VGcOY4orxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
Run Code Online (Sandbox Code Playgroud)
CSS:
.sf-menu li {
float:left;
position:relative;
text-align:center;
font-family:'Yeseva One',cursive;
font-size:17px;
line-height: 64px;
border-bottom:1px solid #4A4A4A;
}
Run Code Online (Sandbox Code Playgroud)
我该怎么办?
我下载了自定义字体(Gotham-Light.eot
),但它在Internet Explorer 9上不起作用.
@font-face {
font-family: Gotham-Light;
src: url('Gotham-Light.eot');
}
Run Code Online (Sandbox Code Playgroud)
这不起作用.我正在使用ASP MVC3重建,使用自定义工具,仍然没有.
所以,我已经尝试了一切让@ font-face在Mozilla Firefox 3.6中运行.问题是我很确定这是因为我想在我的Tumblr博客上使用@ font-face,所以我在Tumblr上传器上传字体.
@font-face {
font-family: feel_scriptregular;
src: url(http://static.tumblr.com/3fk4soa/zKcm8o1y2/feel_script.otf);
src: url(http://static.tumblr.com/3fk4soa/IyZm8o1sa/feel_script-webfont.eot?#iefix) format(embedded-opentype),
url(http://static.tumblr.com/3fk4soa/wgFm8o1tk/feel_script-webfont.woff) format(woff),
url(http://static.tumblr.com/3fk4soa/wlLm8o1us/feel_script-webfont.ttf) format(truetype),
url(http://static.tumblr.com/3fk4soa/tofm8o1vl/feel_script-webfont.svg#feel_scriptregular) format(svg);
}
Run Code Online (Sandbox Code Playgroud)
它不适用于双引号("),或单引号(')或没有任何,我不知道该怎么办..:/