当前位置：文江博客话题详情

网站上的书法字体

发布于 2024-08-27 06:21:14 字数 130 浏览 10 评论 0原文

如果我想让一些文本以书法字体显示，我如何知道它将如何呈现在用户计算机上。我怎么知道那个人在计算机上有什么字体或者这很重要吗？有什么在CSS中做到这一点的好例子吗？

我最好在 Photoshop 中将一些东西放在一起并另存为图像吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甩你一脸翔 2024-09-03 06:21:14

如果您使用不会经常更改的标题和精美页面元素的字体，我会使用 Photoshop 中的图像。

如果您想在文本主体中使用该字体，我建议在 css 中定义一个字体系列。如果您找到并下载的字体很可能最终用户不会拥有它，我会找到您想要在当前操作系统上使用的字体。如果它是系统字体或像 ms word 这样的主要软件应用程序附带的字体，那么它很有可能在最终用户的计算机上可用。一旦你找到了你想要使用的字体，我就会做一些研究，看看你是否能找到 mac 风格甚至 Unix 风格的类似字体。

body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}

使用您知道可以在任何人的计算机上使用的备份字体总是好的，浏览器会在列表中选择最适用的字体，从第一个规定的字体开始，直到找到匹配的字体。

If you are using the font for headings and fancy page elements that are not going to change often I would use an image from photoshop.

If you want to use the font for the main body of text I would suggest defining a font family in css. I would find the font you want to use on your current os if its a font you found and downloaded chances are the end user wont have it. If its a system font or a font that comes with a major software application like ms word there is a good chance it will be available on the end users machine. Once you have found the font you want to use I would then do a little research and see if you can find something similar in a mac flavour and even a Unix flavour.

body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}

Its always good to use a backup font that you know will work on anyone's machine the browser will select the most applicable in the list starting with the first font stated working its way until it finds a match.

回复收藏 0 原文

淡淡の花香 2024-09-03 06:21:14

您可以将 TTF 字体文件嵌入到 CSS 中。

一个很好的例子是此处：

/* DejaVu Sans 2.24
   http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
@font-face {
    font-family: "DejaVu Sans";
    src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}

编辑：

注意：这仅适用于 Firefox，也可能适用于 Chrome。

Microsoft 发布了一份关于如何将字体嵌入网页的文档使用嵌入式 OpenType 格式。它涉及将字体转换为 EOT 文件，然后使用以下语法在样式表中引用它：（

@font-face {
    font-family: Piefont;
    font-style:  normal;
    font-weight: normal;
    src: url(PIE0.eot);
}

这是从官方在线演示此处）。

根据下面 Boldewyn 的回答，我敢打赌您也可以在 src: 参数中使用 TTF 文件。

You can embed TTF font files into CSS.

A good example of it is here:

/* DejaVu Sans 2.24
   http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
@font-face {
    font-family: "DejaVu Sans";
    src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}

Edit:

Note: This will only work in Firefox, and possibly Chrome.

Microsoft has published a document about how to embed fonts into a web page using the Embedded OpenType format. It involves converting the font to a an EOT file and then referencing it in the stylesheet using the following syntax:

@font-face {
    font-family: Piefont;
    font-style:  normal;
    font-weight: normal;
    src: url(PIE0.eot);
}

(This was pulled from an official online demo here).

Based on Boldewyn's answer below, I would bet that you could also use a TTF file in the src: parameter.

回复收藏 0 原文

浅语花开 2024-09-03 06:21:14

我倾向于在我的个人网站上使用 @font-face ..但这取决于您这样做的目的。

首先..问题。
这是静态文本还是我们正在谈论帖子标题等。

如果是静态文本（例如主标题），请搭配图像。

与图像相同的文本(seo)

和 css
h1 {background:url(/images/use-the-text-as-image-name-for-seo.png) 左上角无重复；宽度：100px； height:30px;} /* 宽度和高度为图像宽度/高度 /
h1 Strong {position:absolute;left:-8000px;}/ 确保文本不会显示在图像上，但不会出于搜索引擎优化/屏幕阅读器的目的而隐藏它 */

如果您正在谈论需要动态的东西，并且你需要的不仅仅是优雅的降级，请选择 sIFR。如果可以接受优雅的降级，请使用 @font-face