Html 如何更改html中的字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18007440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change font size in html?
提问by Pancake_Senpai
I am trying to make a website and I want to know how to change the size of text in a paragraph. I want paragraph 1 to be bigger than paragraph 2. It doesn't matter how much bigger, as long as it's bigger. How do I do this?
我正在尝试制作一个网站，我想知道如何更改段落中文本的大小。我希望第 1 段比第 2 段大。大多少都无所谓，只要大一点就行。我该怎么做呢？
My code is below:
我的代码如下：
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
回答by Thanos
回答by Roel Magdaleno
Or add styles inline:
或添加样式内联：
<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>
回答by DisinterestedObserver
If you're just interested in increasing the font size of just the first paragraph of any document, an effect used by online publications, then you can use the first-child pseudo-class to achieve the desired effect.
如果您只是对增加任何文档第一段的字体大小感兴趣，这是在线出版物使用的效果，那么您可以使用 first-child 伪类来实现所需的效果。
p:first-child
{
font-size: 115%; // Will set the font size to be 115% of the original font-size for the p element.
}
However, this will change the font size of every p element that is the first-child of any other element. If you're interested in setting the size of the first p element of the body element, then use the following:
但是，这将更改作为任何其他元素的第一个子元素的每个 p 元素的字体大小。如果您有兴趣设置 body 元素的第一个 p 元素的大小，请使用以下命令：
body > p:first-child
{
font-size: 115%;
}
The above code will only work with the p element that is a child of the body element.
上面的代码仅适用于作为 body 元素子元素的 p 元素。
回答by doitlikejustin
If you want to do this without adding classes...
如果您想在不添加类的情况下执行此操作...
p:first-child {
font-size: 16px;
}
p:last-child {
font-size: 12px;
}
or
或者
p:nth-child(1) {
font-size: 16px;
}
p:nth-child(2) {
font-size: 12px;
}
回答by AwesomePicassom
You can't do it in HTML. You can in CSS. Create a new CSS file and write:
你不能在 HTML 中做到这一点。你可以在 CSS 中。创建一个新的 CSS 文件并写入：
p {
font-size: (some number);
}
If that doesn't work make sure you don't have any "pre" tags, which make your code a bit smaller.
如果这不起作用，请确保您没有任何“pre”标签，这会使您的代码更小。
回答by Paul McBurney
You can do this by setting a style in your paragraph tag. For example if you wanted to change the font size to 28px.
您可以通过在段落标签中设置样式来做到这一点。例如，如果您想将字体大小更改为 28px。
<p style="font-size: 28px;"> Hello, World! </p>
You can also set the color by setting:
您还可以通过设置来设置颜色：
<p style="color: blue;"> Hello, World! </p>
However, if you want to preview font sizes and colors (which I recommend doing) before you add them to your website and use them. I recommend testing them out beforehand so you pick a good font size and color that contrasts well with the background. I recommend using this site if you wish to do so, couldn't find anything else: http://fontpreview.herokuapp.com/
但是，如果您想在将它们添加到您的网站并使用它们之前预览字体大小和颜色（我建议这样做）。我建议事先测试它们，以便您选择与背景形成鲜明对比的良好字体大小和颜色。如果您愿意，我建议您使用此站点，找不到其他任何内容：http: //fontpreview.herokuapp.com/
