页面设计的字体问题？

海洋之蓝

268179243

发布于
2023-02-16 安徽

假如网页中用到一种不常见的字体，一般电脑上都没有安装。
如果我在服务器上安装了此种字体，那么用户浏览器打开网页能否正确显示这个字体？还是需要用户也安装此种字体才能浏览？
一般此类问题，各位如何解决？

css html

阅读 1.4k

3 个回答

得票最新

Meathill

22.6k133642

发布于
2023-02-16 广东

一般来说不能。大部分情况下，用户要安装字体才能使用；或者我们可以使用 web font，但是用户必须下载字体才能完成渲染，可能导致网页布局抖动。
通常来说，拼音文字使用特殊字体会方便一些，因为字母数量比较少，所以字体文件也比较小，下载负担也不大。中文一个字体几M 十几M，下载成本很高。
所以，正文文字建议用普通字体。特殊的图形效果，可以考虑用字蛛之类的工具提取需要用到的文字，构建成小字体文件使用。

玛拉_以琳

8.7k41542

发布于
2023-02-16 上海

可以使用@font-face:
具体方法如下, 网上也有许多可以看一下:

@font-face的使用
首先@font-face这个属性是用来设置自定义的字体的，因为有时候如果我们直接使用font-family属性来制作网页使用自定义的字体，那么这个时候如果浏览器不支持你这种字体的话你设置的这种字体的话，浏览器会自动的采用默认的字体去显示你的网页。

这种情况下的话，我们就可以采用font-face这个属性去设置我们自定义的字体。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置自定已字体 */
        @font-face {
            font-family: 'sha';
            src: url(./言叶之庭字体.ttf);
        }
 
        div {
            /* 使用自定义字体 */
            font-family: 'sha';
        }
    </style>
</head>
<body>
    <div>oppo商城</div>
</body>
</html>

在代码中@font-face有两个必要属性：

font-family：这个属性是为给你引入的字体起一个专属的名称，注意：这个属性的属性值名字不要和那些专属的名称起冲突了，比如：微软雅黑这种，不要和字体名字冲突。
src：这个属性的属性值就是你自定义字体的路径，我们一般采用相对路径去使用。
最后在需要使用的地方，给font-family的值为我们自己设置的@font-face里面的font-family的属性值；这样就把我们自定义的字体引入成功了。

注：这个自定义字体，可以直接去百度下载，一般字体都是 .ttf结尾的文件。

https://blog.csdn.net/Be_blac...

陟上晴明

21.5k145091

发布于
2023-02-16 浙江

更新于
2023-02-16

可以使用自定字体。不是服务器上安装，而是把字体资源存放到服务器上面，然后使用 @font-face 引入，用户载入CSS样式表后就会去请求服务器上对应的字体文件。
@font-face 使用方法具体参看文档 @font-face - CSS | MDN
中文字体包比较大，动则 5M、10M，有一些大的字体可能会超过 20M。这样在以下服务器带宽不足的情况下会造成其他衍生问题。一般来说需要使用字体提取提取项目使用到的文字，来缩减字体包的大小。fontmin: Minify font seamlessly

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

页面设计的字体问题？

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？