h1、h2、h3 标题中的粗体字 - 92590

Posted

技术标签:

【中文标题】h1、h2、h3 标题中的粗体字 - 92590【英文标题】:Bold font in h1, h2, h3 titles - 92590 【发布时间】:2012-09-17 11:20:18 【问题描述】:

我需要帮助来了解如何在 WordPress 的优雅主题中获得粗体字体,但仅限于标题区域(h1、h2、h3 等),因为在文本正文中获取它没有问题。

我已经尝试过了,即使在编辑器中我得到了粗体标题,但一旦我发布了页面,情况就不是这样了,无论我做了什么更改。

我包含了代码(不是完整的,而是重要的部分)——“h1”区域中的任何更改都不会在发布后得到反映,甚至字体类型也不会反映,除了大小。我不是编码员,所以也许我缺少一些东西。请帮忙:

/*------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; 

body  line-height: 1; 
ol, ul  list-style: none; 
blockquote, q  quotes: none; 


blockquote:before, blockquote:after,q:before, q:after  content: ''; content: none; 

/* remember to define focus styles! */
:focus  outline: 0; 

/* remember to highlight inserts somehow! */
ins  text-decoration: none; 
del  text-decoration: line-through; 

/* tables still need 'cellspacing="0"' in the markup */
table  border-collapse: collapse; border-spacing: 0; 


/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/

body  line-height: 18px; font-family: 'Droid Sans', Arial, sans-serif; font-size: 15px; color: black; text-shadow: 1px 1px 1px #ffffff; background-color: #15191f; 

a  text-decoration: none; color: #00b7f3; 
a:hover  text-decoration: underline; 
.clear  clear: both; 
.ui-tabs-hide  display: none; 
br.clear  margin: 0px; padding: 0px; 

h1, h2, h3, h4, h5, h6  padding-bottom: 5px; color: #111; letter-spacing: -1px; line-height: 1em; font-weight: bold; 
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a  color: #111; 
h1  font-size: 30px; font-weight: bold; font-family:"Times New Roman", Times, serif;
h2  font-size: 24px; 
h3  font-size: 22px; 
h4  font-size: 18px; 
h5  font-size: 16px; 
h6  font-size: 14px; 
p  padding-bottom: 10px; line-height: 18px; 
strong  font-weight: bold; color: #1c1c1c; 
cite, em, i  font-style: italic; 
pre, code  font-family: Courier New, monospace; margin-bottom: 10px; 
ins  text-decoration: none; 
sup, sub  height: 0; line-height: 1; position: relative; vertical-align: baseline; 
sup  bottom: 0.8em; 
sub  top: 0.3em; 
dl  margin: 0 0 1.5em 0; 
dl dt  font-weight: bold; 
dd   margin-left: 1.5em;
blockquote   margin: 1.5em; padding: 1em; color: #666666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; 
    blockquote p  padding-bottom: 0px; 

input[type=text],input.text, input.title, textarea, select  background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; 
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus  border-color:#2D3940; color: #3e3e3e; 
input[type=text], input.text, input.title, textarea, select  margin:0.5em 0; 
textarea  padding: 4px; 

img#about-image  float: left; margin: 3px 8px 8px 0px; 

.clearfix:after  visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; 
* html .clearfix              zoom: 1;  /* IE6 */
*:first-child+html .clearfix  zoom: 1;  /* IE7 */

/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/

#top  background: url(images/top-bg.png) repeat-x; 
    #top-wrapper  background: url(images/top-wrapper-bg.jpg) no-repeat top center; 
        #top-content  background: url(images/top-content-bg.png) repeat-x bottom left; 
            #bottom-light  background: url(images/bottom-light-bg.png) no-repeat bottom center; 
                .container  text-align: left; margin: 0 auto; width: 960px; position: relative; 
                    #top .container  padding-bottom: 60px;  
                        #logo  margin: 65px 13px 35px; 
                        #menu  background: url(images/left-menu-bg.png) no-repeat top left; padding-left: 11px; height: 49px; 
                            #menu-right  background: url(images/right-menu-bg.png) no-repeat top right; padding-right: 11px; height: 49px; 
                                #menu-content  background: url(images/content-menu-bg.png) repeat-x; height: 49px; 
                        #social-icons  float: right; margin-right:23px; margin-top: 17px; 
                            #social-icons a  padding-left:4px;        

#content  background: url(images/content-bg.png); border-top: 1px solid #ffffff;  
    #content-shadow  background: url(images/content-shadow-bg.png) repeat-x top left; padding-top: 70px; padding-bottom: 37px;    
        #services  margin-bottom: 40px; 
            .service  margin-right: 45px; width: 238px; float:left; position:relative; padding-left: 52px; 
                .last  margin-right: 0px; 
                    img.icon  position:absolute; top: 0px; left: 0px; 
                    .service h3.title   font-size: 24px; margin-bottom: 8px; color: #1f262d; 
                    .service p  line-height: 21px; 
                    .service a.readmore  background:url(images/readmore.png) no-repeat right bottom; color:#1c2329; display:block; font-size:11px; height:24px; line-height:24px; padding-right:10px; text-shadow:1px 1px 1px #ffffff; display:block; float:right; 
                        .service a.readmore span  background:url(images/readmore.png) no-repeat;
display:block; height:24px; padding-left: 12px; padding-right: 2px; 
                        .service a.readmore:hover  color: #000; 

【问题讨论】:

发布指向实际博客的链接。您是否正在保存更改?你是如何编辑 CSS 文件的? 通常最好转到外观 > 主题选项 > 设计并输入您的自定义 CSS 发布链接,以便我们查看博客。有可能添加的其他样式表可能会覆盖您的样式。 【参考方案1】:

试试 CSS font-weight 属性值:

h1, h2, h3, h4, h5, h6 

  font-weight:100;


您可以从100, 200, 300, 400, 500, 600, 700, 800 to 900. 调整值。900 的属性值最粗,100 最轻。

【讨论】:

值得一提的是,许多字体并不支持所有 9 种不同的权重值。对于font-weight: bold;,相当于使用font-weight: 700【参考方案2】:

尝试添加

h1
font-weight: bold;

到您的外部 css 文件,或替换您的

<h1> your text here </h1>

<h1 style="font-weight: bold"> your text here </h1> 

【讨论】:

是的,h1 字体粗细:粗体;工作!但是 font-weight 的值 100, 200, 300, 400, 500, 600, 700, 800 to 900 对标题标签不起作用(可能不再起作用,它曾经是)。 在这里做一些实验:w3schools.com/cs-s-ref/tryit.asp?filename=trycss_font-weight - 在正文 html 和 CSS 中将其中一个

更改为

,然后更改字体大小。似乎最大值为 600,但较低的值仍然有效。

以上是关于h1、h2、h3 标题中的粗体字 - 92590的主要内容,如果未能解决你的问题,请参考以下文章

HTML标签

Markdown测试2

css中的H1.H2,H3……默认含都有哪些属性?

css中的H1.H2,H3……默认含都有哪些属性?

Google Chrome 中的粗体字体模糊(@Font-Face)

CSS中的h1,h2,h3,h4,h5,h6是啥意思