网站上的HTML CSS JavaScript字体,不使用图像
HTML CSS JavaScript Font on Site without use of Image
我知道cufon和另一个类似的。但是,在您的网站上使用非网络标准字体的最佳方式是什么?我有一个客户,他有两种不同的字体,他们想在创建的网站中用作文本,但它们不是网络的标准字体。如果只是导航的话,我也许可以把它们做成图像。但他们希望全身上下都能使用这些字体。
在与cufon相处了一段好时光、一段坏时光后,我决定使用@font face并享受它。
如果您的字体许可证允许,http://www.fontsquirrel.com/fontface/generator是一个很好的生成器,用于所有需要的文件+一些基本的css。
我想所有其他帖子都说了同样的话。我发现@font face是替代字体的最佳工具。如果你有自己的字体,你可以使用Roman提到的字体蠕动生成器。
但是
如果你只是选择了更广泛的字体,你就不能比谷歌字体做得更好了http://www.google.com/webfonts.通过此服务,您可以轻松地向网站添加字体。
这是我如何在网站上使用字体的示例。
@include url('http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css');
@font-face { font-family: VAGLT; src: url('VAGLT.TTF'); }
@font-face { font-family: VAGBT; font-weight: bold; src: url('VAGBT.TTF'); }
.boldtitle{
font-family: VAGBT, sans-serif;
font-weight: bold;
}
这当然在样式表中。
这里有一些问题需要处理。
嵌入
您可以使用CSS的@font-face
嵌入字体文件(OpenType、Web Open font Format[WOFF]等)。不同的web浏览器支持不同格式的字体,因此您需要使用多种格式来捕捉所有变体。
以下内容应该有效:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
body {
font-family: MyFontFamily, /* etc. */ sans-serif;
}
法律
你应该检查字体许可证,以确保它们可以在网络上使用。上面显示的嵌入被广泛认为是一种有限的分发形式,但现在许多字体许可证都相当自由。
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 如何在谷歌字体加载时显示加载图像
- 尝试在随机文本和图像脚本中添加样式/更改字体
- 如何将css文件与Grunt/Gulp/Webpack中Bower的图像和字体连接起来
- 如何在 Gmail 中使用 javascript 在动态按钮中设置图像和字体大小
- 循环浏览web字体文件中的图像
- 如何将网页中的字体转换为图像
- 在PopupPanel中添加图像和更改文本字体大小无效
- 设备宽度的iphone上的mathJax产生图像字体
- 网站上的HTML CSS JavaScript字体,不使用图像
- javascript根据图像是更白还是更黑来更改字体颜色
- 你如何使用字体真棒图标与FineUploader's的图像预览
- 如何用图像复制字体?
- 根据背景图像主导色(在文本区域中)更改字体颜色
- 切换字体-令人敬畏的图像
- 如果字体不可用,则用图像替换文本
- 预加载字体和图像
- 是否可以使用jQuery根据背景滑块图像名称更改字体颜色
- 鼠标悬停时在图像中心显示图标字体