SEO方面 搜尋引擎會依照重要性分辨h1~h6,如果只是要單純字體放大 儘量不要使用h1~h6以免混淆


字型變化

<p class=”KlintStd-Bold”></p>

<p class=”KlintStd-Medium”></p>

<p class=”KlintStd-Regular”></p>

<p class=”KompaktLTStd”></p>

<p class=”NiftyScript-Regular”></p>

同時有兩個class的時候加個空白就可以了
例如:

<p class=”KlintStd-Bold features”></p>


<h1>h1 tag style GUEE 0123456789</h1>

<h2>h2 tag style GUEE 0123456789</h2>

<h3>h3 tag style GUEE 0123456789</h3>

<h4>h4 tag style GUEE 0123456789</h4>

<h5>h5 tag style GUEE 0123456789</h5>
<h6>h6 tag style GUEE 0123456789</h6>

<p style=”font-size:x-small”>p tag font-style x-small GUEE 0123456789</p>

<p style=”font-size:smaller”>p tag font-style smaller GUEE 0123456789</p>

<p>p tag style GUEE 0123456789</p>

<p style=”font-size:larger”>p tag font-style larger GUEE 0123456789</p>

<p style=”font-size:large”>p tag font-style large GUEE 0123456789</p>

<p style=”font-size:x-large”>p tag font-style x-large GUEE 0123456789</p>

<blockquote>blockquote tag style GUEE 0123456789</blockquote>

<strong>strong tag style GUEE 關鍵字加強用 0123456789</strong>
<b>b tag style GUEE 單純粗體造型用 0123456789</b>

  • <div class=”features”><ul><li>features class-style for li tag</li></ul><div>
.section_two{ width:100%; background:url(../images/howItWorks_bg.jpg) repeat-x; padding:130px 0 70px; overflow:hidden;}
.how_it_works_txt{ padding:25px 50px 0; text-align:left;}
.how_it_works_txt h3{ color:#ffffff; font-size:54px; font-family: ‘Montserrat_xb’; text-transform:uppercase; padding-bottom:15px;}
.how_it_works_txt p{ color:#ffffff; font-size:18px; font-family: ‘RopaSans_reg’;}
.lock_display{ overflow:hidden; margin:30px 0 0; text-align:center;}
.lock_img_with_bg{ float:left; max-width:200px;}
.lock_img_with_bg p{font-size: 13px; text-transform: uppercase; padding: 0 0 15px 40px; font-family: ‘RopaSans_i’; color:#302b06;}
.section_three{ width:100%; padding:20px 0 70px; overflow:hidden;}
.products_gallery{ width:100%; max-width:1030px; margin:0 auto;}
.products_gallery h2{ font-size:54px; font-family: ‘Montserrat_xb’; text-transform:uppercase; padding-bottom:15px; color:#333333; text-align:center;}
.products_gallery p{ font-size:18px; font-family: ‘RopaSans_reg’; color:#656565; text-align:center;}
.product_box{ margin:36px 0 0;}
.product_item{ width:33.33%; max-width:330px; float:left; margin:0 15px 0 0; text-align:left !important;}
.product_item:nth-last-child(1){ margin: 0}
.prod_img{ position: relative; width:100%; overflow:hidden; height:220px;}
.prod_img img{ height:100%;}
.prod_img h6{ position:absolute; left:0; bottom:0; min-width:180px; padding:5px 17px; text-align:left; background:#12141a; color:#fff; font-size:20px; text-transform:uppercase; font-family: ‘Montserrat_light’;}
.prod_text{ padding:20px 20px 20px 0; border-bottom:1px solid #d9d9d9;}
.prod_text p{ color:#555555; font-size:14px; font-family: ‘RopaSans_reg’; text-align:left !important; }
.prod_link{ margin:10px 0;}
.prod_link a{ color:#837400; font-size:15px; font-family: ‘RopaSans_reg’; text-align:left !important; letter-spacing:1.5px; text-decoration:none; text-transform:uppercase; }
.product_item:hover .prod_img img{ transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); moz-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transition:all ease .5s; -o-transition:all ease .5s; -webkit-transition:all ease .5s; -moz-transition:all ease .5s;}
.product_item:hover .prod_img h6{ background:#475457; transition:all ease .5s; -o-transition:all ease .5s; -webkit-transition:all ease .5s; -moz-transition:all ease .5s; }
.product_item:hover .prod_link a, .prod_link a:hover{ color:#12141a; }
.section_four{ width:100%; background:url(../images/installation_bg.jpg) repeat-x center center; background-size: cover; padding:65px 0 105px; position:relative; overflow:hidden;}
.section_four .latch_pic_bottom{ position:absolute; bottom:-1px; right:60px;}
.installatn_part h2{ font-size:54px; font-family: ‘Montserrat_xb’; text-transform:uppercase; padding-bottom:15px; color:#333333; text-align:center;}
.heading_para{ font-size:18px; font-family: ‘RopaSans_reg’; color:#656565; text-align:center; max-width:628px; margin:0 auto;}
.installatn_steps{ margin:50px auto 0px;}
.install-step-one img{ margin:0 auto 50px; display:block; max-width:100%;}
.install-step-two img{ text-align:center; margin:0 auto 50px; display:block;}
.install-step-one ul, .install-step-two ul{ margin:0; padding:0 0 0 60px;}
.install-step-one li, .install-step-two li{ font-size:18px; font-family: ‘RopaSans_reg’; position:relative; color:#434343; }
.install-step-one li:before{ content:’A.’; color:#171717; font-size:44px; font-family: ‘RopaSans_reg’; position:absolute; left:-50px; margin-top: -10px; }
.install-step-two li:before{ content:’B.’; color:#171717; font-size:44px; font-family: ‘RopaSans_reg’; position:absolute; left:-50px; margin-top: -10px; }
.installtn_link{ margin:50px auto 0; text-align:center;}
.installtn_link a{font-size: 15px; color: #fff; font-family: ‘RopaSans_reg’; padding: 10px 66px; text-transform: uppercase; display: inline-block;animation-duration: 1s;-webkit-animation-duration:1s;animation-delay: 3s;-webkit-animation-delay: 3s; background:#000;}
.installtn_link a:hover{color: #000; text-decoration: none;}
.installtn_link a:focus{text-decoration: none;}
.section_five{ background:#12141a ; width:100%; padding:100px 0 90px;}
.testimonial-inner{ width:100%; max-width:650px; margin:0 auto;}
.testimonial-inner h5{ font-family: ‘RopaSans_i’; text-align:center; font-size:19px; color:#fff; padding:0 0px;}
.testimonial-inner h6{ font-family: ‘RopaSans_reg’; text-align:center; font-size:18px; color:#fff; padding:30px 0px 0; text-transform:uppercase;}
#testimonial-Carousel .carousel-control{text-shadow:none;opacity: 1;width: 0;}
#testimonial-Carousel .carousel-control.left{margin: 30px 0 0 2%; width: 32px; height: 30px; background-image: none;}
#testimonial-Carousel .carousel-control.right{width: 32px; height: 30px; background-image: none; margin: 30px 2% 0 0;}
/* —– Inner pages ————— */
.inner_page_installation_section{ margin:30px auto 0 !important;}
.inner_page_installation_section{ margin:50px auto 0; text-align:center;}
.inner_page_installation_section a{font-size: 15px; color: #fff; font-family: ‘RopaSans_reg’; padding: 10px 66px; text-transform: uppercase; display: inline-block;animation-duration: 1s;-webkit-animation-duration:1s;animation-delay: 3s;-webkit-animation-delay: 3s; background:#000;}
.inner_page_installation_section a:hover{color: #000; text-decoration: none;}
.inner_page_installation_section a:focus{text-decoration: none;}
.inner_installation{ width:100%; background:url(../images/prod_install_bg.jpg) repeat-x center center; background-size: cover; padding:65px 0 105px; position:relative; overflow:hidden;}
.inner_installation .latch_pic_bottom{ position:absolute; bottom:-1px; right:60px;}
.prod_one_section{ background:#fff; padding:80px 0; width:100%;}
.prod_one_details{ width:100%; max-width:970px; margin:0 auto; }
.prod_one_slider{ width:50%; float:left; max-width:500px;}
.prod_one_slider #bx-pager, .prod_one_slider #bx-pager2, .prod_one_slider #bx-pager3{ width:100%; clear:both;}
.prod_one_slider #bx-pager a, .prod_one_slider #bx-pager2 a, .prod_one_slider #bx-pager3 a{ width:90px; height:80px; float:left; margin-right:6px;}
.prod_one_slider #bx-pager a img, .prod_one_slider #bx-pager2 a img, .prod_one_slider #bx-pager3 a img{ height:100%;}
.prod_one_slider .bx-wrapper { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none; background: transparent; margin-bottom:6px;}
.prod_one_features{ width:50%; float:right; max-width:440px; overflow: hidden;}
.prod_one_features h5{ font-size:30px; font-family: ‘Montserrat_xb’; text-transform:uppercase; padding-bottom:15px; color:#121319; text-align:left;}
.prod_one_features h6{ color:#555555; font-family: ‘RopaSans_reg’; font-size:18px; padding-bottom:15px; text-align:left;}
.p_details_list{ width:100%; max-width:360px; margin:10px 0 20px;}
.price_part_table{ background:#1a1a1a; color:#fff !important;}
.p_details_list>.table>tbody>tr>td{ border:none; color:#333333; font-family: ‘RopaSans_reg’; font-size:13px; text-transform:uppercase; padding:5px 20px; }
.p_details_list>.table-striped>tbody>tr:nth-of-type(odd) { background-color: #dfdfd5; }
.p_details_list>.table>tbody>tr>td:last-child{ text-align: right; padding-left: 0; width: 20%;}
.prod_one_features h4{ font-family: ‘Montserrat_light’; font-size:22px; color:#555555; text-align:left; text-transform:uppercase; max-width:315px; line-height:24px;}
.border_gateLatch{ width:100%; height:1px; margin:20px 0; background:#d9d9d9;}
.feature_one_gateLatch{ width:100%; max-width:170px; margin-right:40px;}
.feature_one_gateLatch p{ color:#555555; font-size:14px; font-family: ‘RopaSans_reg’;}
.prod_one_slider #bx-pager2 a.active, .prod_one_slider #bx-pager3 a.active{ -webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */ filter: grayscale(100%);}
.prod_two_section{ background:#f3f2ee; padding:80px 0; width:100%;}
.prod_desp{  position: absolute; bottom: 0; padding: 5px 10px; background: #000; color: #fff; display: block; max-width: 300px; width: 100%; font-size:18px; font-family: ‘RopaSans_reg’; text-transform:uppercase; text-align:left}
#gate-Carousel .carousel-indicators{ bottom:-100px}
#gate-Carousel .carousel-indicators
.popup_img{ position:relative;}
.modal_pop_box{ position:absolute; top:10px; right:10px;}
#myChatModal{ z-index:9999;}
.installation_heading{ width:100%; padding:65px 0; position:relative; overflow:hidden; background:#fff;}
.installation_heading h2{ font-size:54px; font-family: ‘Montserrat_xb’; text-transform:uppercase; padding-bottom:15px; color:#333333; text-align:center;}
.installation_section{ width:100%; padding:65px 0 105px; position:relative; overflow:hidden; background:url(../images/installation_bg.jpg) repeat-x center center; background-size: cover;}
.installation_section .latch_pic_bottom{ position:absolute; bottom:-1px; right:60px;}
.installation_section .installatn_part h6{ font-family: ‘Montserrat_smb’; text-transform:uppercase; padding-bottom:15px; color:#000; text-align:center; font-size:15px; }
.install_steps_list{ border-bottom:2px solid #000; padding:0 0px 30px; margin-bottom:20px;}
.install_steps_list ul { counter-reset: item; padding-left:50px; padding-right:20px; }
.install_steps_list ul li { display: block; }
.install_steps_list ul li:before { content: counter(item) “. “; counter-increment: item; color:#171717; font-size:25px; font-family: ‘RopaSans_reg’; position:absolute; left:-32px; margin-top: -3px;  }
.install_steps_list ul li:before{ }
.install_steps_list li{ font-size:18px; font-family: ‘RopaSans_reg’ !important; position:relative; color:#434343; padding:10px 0 0; }
h4.warranty_text{ font-size:15px; font-family: ‘RopaSans_reg’; color:#434343; padding:0px 0 40px; text-align:left;}
h4.warranty_text span{ font-family: ‘Montserrat_smb’; text-transform:uppercase; padding-bottom:10px; color:#000; font-size:16px; display:block;}
.contact_section{  width:100%; padding:65px 0; position:relative; overflow:hidden; background:#f3f2ee;}
.contact_details{ width:100%; overflow:hidden;}
.contact_details h4, .contact_form h4{ font-size:30px; font-family: ‘RopaSans_reg’; color:#d1bb1d; padding:0px 0 20px; text-align:left; text-transform:uppercase;}
.contact_details p{ position:relative; font-family: ‘RopaSans_reg’; color:#434343; padding:0px 0 12px 40px; text-align:left; font-size:18px; }
.contact_details p a{ color:#434343; text-decoration:none;}
.contact_details p i{ position:absolute; left:11px; font-size:18px; color:#434343; margin-top:5px;}
.contact_details p i.fa-envelope{ margin-top:3px !important; left: 8px;}
.contact_form p{ font-family: ‘RopaSans_reg’; color:#434343; padding:0px 0 20px 0px; text-align:left; font-size:18px; }
.contact_form p input[type=”text”], .contact_form p input[type=”email”]{ width:100%; padding:7px 10px; font-size:16px; color:#434343; border:1px solid #d9dce3; margin-top:3px; }
.contact_form p textarea{ min-height:150px; width:100%; padding:7px 10px; font-size:16px; color:#434343; border:1px solid #d9dce3; margin-top:3px;}
.contact_form p input[type=”text”]:focus, .contact_form p input[type=”email”]:focus, .contact_form p textarea:focus{ outline:none;}
.contact_form input[type=”submit”]{ width:100%; background:#d1bb1d; color:#fff; font-family: ‘Montserrat_smb’; text-align:center; padding:7px 0; border:none; font-size:18px; margin: 30px 0; }
.two_inputs{ width:48%; float:left;}
/* ——————————  404_page  —————————————————-*/
.error_page{ width:100%; background:#f3f2ee; padding:65px 0; text-align:center; }
.error_page h2{ font-size:34px; font-family: ‘Montserrat_xb’; padding-bottom:0px; color:#333333; text-align:center;}
/*————————————————————–footer part starts———————————————————*/
.footer{ width:100%; }
.footer_section_one{ width:100%; background:#ffffff; padding:75px 0 65px; overflow:hidden;}
.footer_blurb{ width:100%; max-width:650px; margin:0 auto;}
.footer_blurb h5{ color:#656565; font-size:21px; font-family: ‘RopaSans_reg’; text-align:center; text-transform:uppercase;}
.footer_blurb h5 span{ color:#333333;}
.footer_section_two{ width:100%; background:#12141a; padding:65px 0; overflow:hidden;}
.footer_logo, .footer_menu, .footer_address, .footer_details{ width:100%; text-align:left;}
.footer_logo img{ max-width:100%;}
.footer_logo h2{ color:#8a8a8a; font-size:12px; font-family: ‘RopaSans_reg’; padding:30px 0 5px 3px; }
.footer_logo p a{ color:#8a8a8a; font-size:12px; font-family: ‘RopaSans_reg’; padding:10px 0 0 3px; text-decoration:none; }
.footer_logo p a:hover{ color:#fff;}
.footer_menu h5, .footer_address h5{ font-size:19px; font-family: ‘Montserrat_xb’; text-transform:uppercase; padding:3px 0 20px; color:#fff;}
.footer_menu ul{ margin:0; padding:0 0 0 0px;}
.footer_menu li, .footer_menu li a{ color:#8a8a8a; font-size:14px; font-family: ‘RopaSans_reg’; text-decoration:none; padding:0 0 3px; position:relative; }
.footer_menu li a:hover{ color:#fff;}
.footer_address{ padding-left:15px;}
.footer_address h6{ color:#c1ad1d; font-size:17px; font-family: ‘RopaSans_reg’; text-transform:uppercase;}
.footer_address p{ color:#8a8a8a; font-size:14px; font-family: ‘RopaSans_reg’; padding:3px 0 0;}
.footer_details ul{ padding:0 0 0 80px; margin:42px 0 0;}
.footer_details li{ text-transform:uppercase; color:#fff; font-size:11px; padding:0 0 10px; font-family: ‘RopaSans_reg’; position:relative; }
.footer_details li a{ display:block; text-decoration:none; font-size:20px; font-family: ‘RopaSans_reg’; color:#8a8a8a; text-transform:none; margin:-3px 0 0;}
.footer_details li a:hover{ color:#fff;}
.footer_details li i{ position:absolute; color:#d1bb1d; font-size:20px; left:-28px; margin-top:4px; }
.facebook_link{text-align:center; background:#3b5998; width:40px; height:40px; float:left;}
.facebook_link a{ color:#fff; text-decoration:none; font-size:20px; top:6px; position:relative;}
.youtube_link{ background:#cd201f; text-align:center; width:40px; height:40px; float:left;}
.youtube_link a{ color:#fff; text-decoration:none; font-size:20px; top:6px; position:relative;}
/* Radial In */
.hvr-radial-in_facebook { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent; position: relative; overflow: hidden; background: #cfc347; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-radial-in_facebook:before { content: “”;  background:#3b5998; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; -webkit-transform: scale(2); transform: scale(2); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-radial-in_facebook:hover, .hvr-radial-in_facebook:focus, .hvr-radial-in_facebook:active { color: white;}
.hvr-radial-in_facebook:hover:before, .hvr-radial-in_facebook:focus:before, .hvr-radial-in_facebook:active:before { -webkit-transform: scale(0); transform: scale(0);}
.hvr-radial-in_youtube{ display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent; position: relative; overflow: hidden; background: #cfc347; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-radial-in_youtube:before { content: “”; background:#cd201f; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; -webkit-transform: scale(2); transform: scale(2); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-radial-in_youtube:hover, .hvr-radial-in_youtube:focus, .hvr-radial-in_youtube:active { color: white;}
.hvr-radial-in_youtube:hover:before, .hvr-radial-in_youtube:focus:before, .hvr-radial-in_youtube:active:before { -webkit-transform: scale(0); transform: scale(0);}
.scrollup { width: 50px; height: 48px;  position: fixed; bottom: 50px; right: 30px; display: none; text-indent: -9999px; z-index:999; background: url(‘../images/scroll_pic.jpg’) no-repeat; background-color: #;}
/* The Modal (background) */
.gate_lock_slider .modal { display: none; position: fixed; z-index: 9999; padding-top: 100px; left: 0; top: 0; width: 100%; /*height: 100%;*/ overflow: auto; /*background-color: black;*/
background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#b3000000′, endColorstr=’#b3000000′,GradientType=0 ); /* IE6-9 */
}
/* Modal Content */
.gate_lock_slider .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 50%; height:auto; max-width: 1200px;}
/* The Close Button */
.gate_lock_slider .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; opacity:1;}
.gate_lock_slider .close:hover, .gate_lock_slider .close:focus { color: #fff; text-decoration: none; cursor: pointer;}
.gate_lock_slider .mySlides { display: none;}
.gate_lock_slider .cursor { cursor: pointer}
/* Next & previous buttons */
.gate_lock_slider .prev, .gate_lock_slider .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none;}
/* Position the “prev button” to the right */
.gate_lock_slider .prev {left: 0; border-radius: 3px 0 0 3px;}
/* Position the “next button” to the right */
.gate_lock_slider .next {right: 0; border-radius: 3px 0 0 3px;}
/* On hover, add a black background color with a little bit see-through */
.gate_lock_slider .prev:hover, .gate_lock_slider .next:hover { background-color: rgba(0, 0, 0, 0.8);}
/* Number text (1/3 etc) */
.gate_lock_slider .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}
/*img {
  margin-bottom: -4px;
}
*/
.gate_lock_slider .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white;}
.gate_lock_slider .demo { opacity: 0.6;}
.gate_lock_slider .active, .gate_lock_slider .demo:hover { opacity: 1;}
.gate_lock_slider img.hover-shadow { transition: 0.3s}
.gate_lock_slider .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}
.gate_lock_slider .column { float: left; width: 25%;}