文章/答案/技术大牛

发布

css设置字体字体

CSS 设置字体

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页的布局、颜色、字体等视觉效果。

类型

CSS设置字体的属性主要包括以下几种：

font-family：指定文本的字体系列。
font-size：设置文本的大小。
font-weight：设置文本的粗细。
font-style：设置文本的样式（如斜体）。
line-height：设置行高，影响文本的垂直间距。
text-decoration：设置文本的装饰（如下划线）。

应用场景

CSS字体设置在网页设计中非常常见，用于实现以下效果：

品牌一致性：确保网站在不同页面上使用相同的字体，以保持品牌一致性。
可读性：通过调整字体大小和行高，提高文本的可读性。
视觉效果：通过改变字体样式和粗细，增强页面的视觉效果。

示例代码

以下是一个简单的CSS示例，展示如何设置字体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Example</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            font-size: 16px;
            font-weight: normal;
            font-style: normal;
            line-height: 1.5;
            text-decoration: none;
        }
        h1 {
            font-family: 'Times New Roman', serif;
            font-size: 24px;
            font-weight: bold;
            font-style: italic;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Welcome to Our Website</h1>
    <p>This is a sample paragraph with some text.</p>
</body>
</html>

参考链接

MDN Web Docs - CSS Fonts

常见问题及解决方法

字体未显示：
- 确保字体名称正确，并且字体文件已正确加载。
- 使用@font-face规则引入自定义字体。
- 使用@font-face规则引入自定义字体。

字体大小不一致：
- 确保在不同设备上使用相对单位（如em、rem）而不是绝对单位（如px）。
- 确保在不同设备上使用相对单位（如em、rem）而不是绝对单位（如px）。
字体样式冲突：
- 使用CSS选择器的优先级来确保特定元素的样式覆盖全局样式。
- 使用CSS选择器的优先级来确保特定元素的样式覆盖全局样式。

通过以上方法，可以有效解决CSS设置字体时遇到的常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

CSS更改字体(如果不可用)

css、macos、safari

有些人已经知道，如果页面上的字体设置不可用，Mac上的Safari会将字体改为默认字体。在css中的任何页面上都有命令设置默认字体吗？

浏览 3提问于2013-10-08得票数 0

回答已采纳

1回答

CSS重置JavaFX中的自定义字体

css、fonts、label、javafx-2

当我在JavaFX 2中为标签设置自定义字体时，它可以正常工作。但是，当我在CSS样式表中更改-fx-font-size或其他字体属性时，将使用默认字体而不是我的自定义字体。有没有办法在保留自定义字体的同时设置字体大小和颜色？或者可以在CSS样式表中为我的标签设置自定义字体？

浏览 2提问于2012-08-06得票数 0

回答已采纳

1回答

禁用引导字体

javascript、html、css、twitter-bootstrap、fonts

我有一个网站，使用引导CSS/JS。当引导字体与我想要使用的字体冲突时，我遇到了这个问题。示例：引导CSS -有字体是否存在删除引导字体(排版)或如何使用我的字体的方法？附带说明:引导CSS/JS被添加到网站中

浏览 0提问于2013-11-19得票数 10

回答已采纳

3回答

我可以根据字体的可用性设置字体大小吗？

css、font-size

是否可以根据字体的可用性设置不同的字体大小？允许CSS黑客攻击

浏览 2提问于2011-12-16得票数 10

回答已采纳

1回答

Google的Open字体权重

html、css、google-font-api

我在html页面中使用字体，通过：只有font-weight: 600;使字体粗体。其他的价值观似乎没有什么不同。如何使用CSS规则为该特定字体设置中间字体</

浏览 1提问于2017-07-15得票数 9

回答已采纳

2回答

无需更改字体即可引导字形图标

css、twitter-bootstrap、twitter-bootstrap-3、glyphicons

-- Load Bootstrap CSS (Flatly) and Javascript --><script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap

浏览 0提问于2014-06-27得票数 1

1回答

Unicode字体的不同字体大小

css、unicode、joomla、fonts

我正在设置一个多语言Joomla网站，用户可以选择语言。说英语和藏语。所有的英文看起来都很好，但是在藏文网站上看的时候，字体太小了。如果我增加字体大小，那么英文网站的字体也会变大，因为它们都使用相同的CSS文件。救命啊！！

浏览 1提问于2015-01-19得票数 0

回答已采纳

4回答

我正在尝试创建一种在我的网站上使用的字体存储库，这样我就可以在我的css中调用存储库中的任何字体，而无需任何其他设置。为此，我创建了一个子域，在这个子域中，我为存储库中的每种字体放置了文件夹，其中包含每种字体的各种文件类型。我还在子域的根上放置了一个名为@font-face -face.css的css文件，并用每个字体的字体声明填充它，这些字体都有一个绝对链接，这样它们就可以在任何地方使用。我的问题

浏览 4提问于2010-05-24得票数 57

回答已采纳

1回答

我的CSS字体链接和用法有什么问题？

html、css、asp.net-core、fonts、razor-pages

编辑：因此，由于某种原因，当将字体设置为"body“或"html”时，它没有将字体应用于" form“中的元素，因为我只有form元素来测试表单元素，字体没有工作。当我在“表单”元素之前添加一些随机文本时，我在键盘上滚动我的头，我发现字体实际上是工作的.但我原以为如果我在"body“或"html”中设置字体族规则，每个元素都会继承该字体.没有CSS与“@字体-脸”我想

浏览 3提问于2022-04-05得票数 0

1回答

在Android中指定Roboto字体

nativescript

我试图在CSS中设置一个Roboto字体变体--不起作用。我试过“机器人-黑色”-也不起作用。如果我将字体--家族设置为我/app/字体文件夹中的字体名称--这是可行的。

浏览 0提问于2017-03-15得票数 0

3回答

从外部css文件扩展@字体声明

css、font-face、webfonts

我使用的是一个网页字体，是声明在一个外部css文件中的@字体。字体服务的设置使得我可以获取外部css文件，然后在我的css中使用字体。我无法在我自己的@字体定义中获取字体文件本身。每次我在我的网站上使用网页字体时，我都会给它添加相同的两种样式定义。因此，我的字体用法总是如下所示： font-family: 'Knockout 26 A'; -

浏览 4提问于2014-07-27得票数 3

回答已采纳

1回答

如何在mdbook中配置在生成的书中自动使用的自定义字体？

css、rust、fonts

尽管设置简单、快捷，但细节仍然存在问题。我想在一个定制的主题中调整字体。在mdBook手册中，字体配置的可能性仅在中提到：“复制字体”配置选项将“fonts.css”和相应的字体文件复制到要在默认主题中使用的输出目录中。因此，我想描述一下我所做的配置步骤： mdbook init testBook -主题将“主题”目录重命名为“彼得斯主题”创建新目录“peters-主题/字体

浏览 14提问于2020-11-26得票数 5

3回答

在响应css中使用系统字体

android、ios、css、windows-phone-8、fonts

首先，如果我们指定设备上的字体(例如系统字体)，但是我们也调用了Open Sans (我们默认的body字体)，那么设备还会下载Open Sans字体文件吗？<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?'); } body { font-family: roboto

浏览 7提问于2015-01-03得票数 2

3回答

不能用coreUi显示图标

html、css、icons

我正在处理一个名为coreUI的文件夹，该文件夹包含： <link href="css/simple-line-icons.<em

浏览 1提问于2017-07-15得票数 2

回答已采纳

2回答

字体家族在多大程度上在所有浏览器上是一致的？

html、css

以下是事实：我将一个元素上的font-family设置为sans-serif。我的(Chrome)无衬线字体是Helvetica。这个网页在另一个具有潜在不同操作系统的浏览器中打开时，有可能呈现不同的font-family，因为它的sans-serif font-family可能与挖掘不同，例如cailbriA字体家族，像Helvetica是一个通用字体系列，在所有浏览器中呈现相同的(维度)。

浏览 3提问于2020-06-16得票数 0

2回答

更改桌面的字体系列

fonts、gtk、css、tweak、theme-development

我可以用那个css文件改变文件名的颜色。(gtk.css)我如何改变字体的家庭或字体的重量？谢谢！-(如。我的桌面图片：) 📷

浏览 0提问于2017-05-25得票数 1

回答已采纳

2回答

php mPDF，无法设置字体系列和字体大小

php、html、css、pdf、fonts

但是我不能设置我想要的字体系列和字体大小。important;但是字体设置根本没有应用。

浏览 10提问于2017-03-21得票数 3

1回答

在Eclipse包资源管理器和搜索中更改字体大小

eclipse

我想在IDE树结构中设置更大的字体。我尝试从eclipse.ini中删除CSS行，并为我能找到的每个smallFonts类(MPart、树等)设置字体大小。在Mac css文件中，如其他答案中所建议的。对于树中的某些节点，字体大小只会发生变化。任何节点的子节点(带有'>‘符号)中包含已编辑文件的节点仍然以小字体显示。我安装了CSS Spy来尝试弄清楚CSS类，但是我没有看到任何我没有设置</

浏览 0提问于2017-06-10得票数 2

2回答

以编程方式更改GTK3 TextView的字体(快速-小部件TextEditor)

application-development、quickly、pygi

在使用PyGI和GTK3的应用程序中，我试图让用户通过应用程序的设置对话框在TextView中设置字体系列和字体大小。在PyGI中，TextView对象有几个属性的"set“方法，但对于字体属性没有。我可以通过CSS设置字体系列，使用CSS样式提供程序。但我不能动态地更改CSS以尊重用户选择的字体。那我该怎么做呢？编辑以澄清:我不喜欢使用CSS，这似乎只是GTK的首选方法

浏览 0提问于2012-08-29得票数 3

回答已采纳

3回答

根据字体设置不同的线条高度

css、fonts、webfonts

我想为不同的字体设置不同的line-height，从一个列表回退字体。，我想将line-height设置为1.3。当由于首选字体不可用而使用较大的x高度字体时，我想将line-height设置为1.5。如果这两种字体都不可用，并且使用了sans-serif回退，我想将line-height设置为normal。这是否可以使用CSS2.1或CSS3而不诉诸JavaScript？基本原理问题是，不同的<

浏览 5提问于2012-11-03得票数 4

回答已采纳

点击加载更多

css设置字体字体