Jump to content
  • 0

Смена на нормальный шрифт

jaster

Asked by jaster,

 Share

Question

jaster Explorer

jaster

Posted
Posted (edited) 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Checkboxes</title>

<style>

.base{

text-transform:none;

color:white;

position:relative;

height:18px;

width:380px;

transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);

-webkit-transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);

-moz-transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);

-o-transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);

-ms-transform: rotate(0deg) scale(0.885) skew(-19deg) translate(2px);

background:#878f94;

padding-left:23px;

padding-top:12px;

padding-bottom:12px;

font-size:15px;

}

.in11{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#51dbb3;

left:160px;

top:12px;

}

.in12{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#51dbb3;

left:200px;

top:12px;

}

.in13{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#dbd651;

left:240px;

top:12px;

}

.in14{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#dbd651;

left:280px;

top:12px;

}

.in15{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#db8f51;

left:320px;

top:12px;

}

.in16{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#db8f51;

left:360px;

top:12px;

}

.in21{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#51dbb3;

left:160px;

top:12px;

}

.in22{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#51dbb3;

left:200px;

top:12px;

}

.in23{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#dbd651;

left:240px;

top:12px;

}

.in24{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#d3d5d4;

left:280px;

top:12px;

}

.in25{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#d3d5d4;

left:320px;

top:12px;

}

.in26{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#d3d5d4;

left:360px;

top:12px;

}

.in31{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#51dbb3;

left:160px;

top:12px;

}

.in32{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#d3d5d4;

left:200px;

top:12px;

}

.in33{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#d3d5d4;

left:240px;

top:12px;

}

.in34{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#d3d5d4;

left:280px;

top:12px;

}

.in35{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#d3d5d4;

left:320px;

top:12px;

}

.in36{

padding:0px;

position:absolute;

height:20px;

width:25px;

background:#d3d5d4;

left:360px;

top:12px;

}

.cutleft{

height:160px;

width:20px;

background:white;

position:absolute;

left:10px;

top:15px;

}

.cutright{

height:160px;

width:20px;

background:white;

position:absolute;

left:392px;

top:15px;

}

</style>

</head>

<body>

<p><div class="base">Уровень зарядки<div class="in11"></div>

<div class="in12"></div>

<div class="in13"></div>

<div class="in14"></div>

<div class="in15"></div>

<div class="in16"></div>

</div></p>

<p><div class="base">Убойная сила

<div class="in21"></div>

<div class="in22"></div>

<div class="in23"></div>

<div class="in24"></div>

<div class="in25"></div>

<div class="in26"></div>

</div></p>

<p><div class="base">Перезарядка

<div class="in31"></div>

<div class="in32"></div>

<div class="in33"></div>

<div class="in34"></div>

<div class="in35"></div>

<div class="in36"></div>

</div></p>

<div class="cutleft" ></div>

<div class="cutright" ></div>

</body>

</html>[/code/][/spoiler]

Как сделать чтобы ihabn отображался нормальным, а не наклонным.

Edited by alexriz
Для кода используйте тег CODE!!!
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
dmitriydrachov Explorer

dmitriydrachov

Posted
Posted


/*@import url(reset.css) all;*/
* {
margin: 0;
padding: 0;
transition: all 0.1s;
-moz-transition: all 0.1s;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
-ms-transition: all 0.1s;
-kthtml-transition: all 0.1s;
}
html, body {
width: 100%;
height: 100%;
background: #282828;
}
a {
text-decoration: none;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
}
.clear {
clear: both;
}

/*header */
#header {
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
}
.h_search {
font-size: 13px;
color: #c3c1c1;
height: 38px;
background: url(/../img/head_bg_1.png) repeat-x;
}
.s_form {
padding: 10px 20px 0px 0px;
float: right;
}
/* .s_form > p {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px
box-shadow: 0px 0px 10px #fff;
-moz-box-shadow: 0px 0px 10px #fff;
-webkit-box-shadow: 0px 0px 10px #fff;
}*/
.s_field {
background: url(/../img/search_bg.png) repeat-x;
width: 68px;
height: 21px;
padding-left: 13px;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
color: #c3c1c1;
font-size: 13px;
border: 1px solid #080808;
border-right: none;
border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
}
.s_field:focus {
width: 120px;
outline: none;
}
.s_button {
border: 1px solid #080808;
border-left: none;
border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;

width: 20px;
height: 21px;
background: url(/../img/search_button.png) no-repeat center, url(/../img/search_bg.png) repeat-x;
vertical-align: top;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.s_button:hover {
opacity: 0.8;
cursor: pointer;
}

.h_menu {
font-size: 18px;
color: #ffffff;
height: 116px;
background: url(/../img/head_bg_2.png) no-repeat center;
}
.h_menu a {
color: #ffffff;
}
.h_menu a:hover{
color: #1fcff4;
}

.h_position_status {
font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif;
font-size: 26px;/*14px*/
color: #ffffff;/*33d3f4*/
height: 46px;
background: #343433;
}
/*main*/
#main {
font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif;
background: #ffffff;
overflow: hidden;
}
#content {
margin: 2.5% 0 7.5% 11%;
float: left;
width: 52.5%;
}
#rside {
float: left;
margin: 2.5% 11% 7.5% 0;
width: 25.5%;
}

/*c_post*/
.c_post {
margin-bottom: 64px;
}
.p_image > img {
display: block;
margin-bottom: 26px;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing: border-box;
border: 8px solid #ffffff;
width: 100%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0px 0px 10px #000000;
-moz-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
}
h1.p_header {
margin-bottom: 10px;
font-weight: bold;
font-size: 24px;
color: #343332;
}
p.p_article {
margin-left: 10px;
font-size: 13px;
color: #3b3737;
margin-bottom: 35px;
}
.p_comment_count {
font-size: 12px;
color: #030303;
background: url(/../img/comment.png) no-repeat;
display: inline-block;
height: 22px;
padding-left: 10px;
}
.p_comment_count > span {
padding-left: 10px;
color: #0692b0;
}
.p_comment_count:hover {
opacity: 0.7;
}
.p_date {
margin-left: 20px;
font-size: 12px;
}
.p_button {
font-size: 16px;
color: #2b2e2e;
width: 120px;
height: 22px;
box-shadow: 0px 0px 0px 0px #000000 inset,
2px 4px 10px -3px #000000;
-moz-box-shadow: 0px 0px 0px 0px #000000 inset,
2px 4px 10px -3px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000 inset,
2px 4px 10px -3px #000000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 2px solid #cacaca;
text-align: center;
background: url(/../img/button_bg.png) repeat-x;
float: right;
}
.p_button:hover {
box-shadow: 5px 5px 15px -5px #000000 inset,
0px 0px 0px 0px #000000;
-moz-box-shadow: 5px 5px 15px -5px #000000 inset,
0px 0px 0px 0px #000000;
-webkit-box-shadow: 5px 5px 15px -5px #000000 inset,
0px 0px 0px 0px #000000;
}
.p_divide {
box-shadow: 0px 4px 30px #000000;
-moz-box-shadow: 0px 4px 30px #000000;
-webkit-box-shadow: 0px 4px 30px #000000;
margin-top: 47px;
height: 2px;
background: url(/../img/divide.png) repeat-x center;
}



/*rs_block*/
.rs_block {
font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif;
margin-bottom: 40px;
margin-left: 63px;
}
.rs_block > h2 {
font-size: 18px;
color: #343332;
background: url(/../img/right_head_bg.png) repeat-x;
}
.rs_block ul, .rs_block > h2 {
padding: 5px 0 5px 19px;
border: 1px solid #b8b7b7;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing: border-box;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
box-shadow: 0px 10px 20px -11px #000000;
-moz-box-shadow: 0px 10px 20px -11px #000000;
-webkit-box-shadow: 0px 10px 20px -11px #000000;
}
.rs_block ul {
padding-bottom: 10px;
margin-top: 10px;
list-style-image: url(/../img/list_img.png);
}
.rs_block ul li {
line-height: 2.5;
margin: 0 20px 0 10px;
border-bottom: 1px dotted #b3b0b0;
}
.rs_block ul li a{
font-weight: bold;
font-size: 13px;
color: #151416;/*05768e*/
display: block;
}
.rs_block ul li a:hover {
color: #05768e;
}

/*bottom*/
#bottom {
font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif;
color: #ffffff;/*07b2e6*/
height: 286px;
background: url(/../img/bottom_bg.png) repeat-x;
}

/*footer*/
#footer {
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 12px;
color: #aaaaaa;
height: 60px;
background: url(/../img/footer_bg.png) repeat-x;
}

@media screen and (max-width: 800px) {
#content {
margin: 2.5% 11% 7.5% 11%;
width: 82%;
float: none;
}
#rside {
margin: 2.5% 11% 7.5% 11%;
width: 82%;
float: none;
}
.rs_block {
margin-left: 0px;
}
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="h_search">
	 <form action="#" class="s_form">
	 <p>
			 <input class="s_field" type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" /><!--hack for inline-block space
		 --><input class="s_button" type="submit" value="" />
		 </p>
	 </form>
</div><!-- h_search -->
<div class="h_menu"> <a href="#">BLala</a></div><!-- h_menu -->
<div class="h_position_status"></div><!-- h_position_status -->
</div><!-- header -->
<div id="main">
<div id="content">

	 <div class="c_post">
	 <div class="p_image">
	 <img src="/img/post.jpg" alt="post_img" />
	 </div><!-- p_image -->
	 <h1 class="p_header">A Some Awesome Post Title Here</h1>
	 <p class="p_article">Praesent dui sapien, accumsan sed fermentum in, facilisis eu sem. Ut sollicitudin tincidunt sagittis. Cras a turpis ut nulla varius porttitor ac sed dolor. Pellentesque et sem nec metus auctor bibendum in eget odio.</p>
	 <a href="" class="p_comment_count">32<span>Comments</span></a>
	 <span class="p_date">12-00-2012</span>
	 <a href="#" class="p_button">Read More</a>
	 <div class="p_divide"></div>
	 </div><!-- c_post -->

</div><!-- content -->

<div id="rside">

	 <div class="rs_block">
	 <h2>Categories</h2>
	 <ul>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 </ul>
	 </div><!-- rs_block -->
	 <div class="rs_block">
	 <h2>Categories</h2>
	 <ul>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>
	 <li><a href="#">Categories</a></li>

	 </ul>
	 </div><!-- rs_block -->

</div><!-- rside -->
<div class="clear"></div>
<div id="bottom"></div><!-- bottom -->
</div><!-- main -->
<div id="footer"></div><!-- footer -->
</div><!-- wrapper -->
</body>
</html>
И мне пожалуйста помогите, не могу нормально отобразить меню в ie7



			
		


		
			

				
					
						

	
	
		

			
				
				

					
				

			
			
			
		

	


					
				
				
			

		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				
			
			



		

	


	
	
	
	
	
		
		

			
				
				

	
		

			
Join the conversation

			

	
				
					You can post now and register later.
				
				If you have an account, sign in now to post with your account.
				
					
Note: Your post will require moderator approval before it will be visible.
				
			

	
		

	




	
	
		
	
		
	
		
	
	
		
		
	
	

		


	
		Guest
	


		

			
				
					
				
					
						
    
							
  • 
								



	
	
	
	

								
							
    • 
						

					
				
					
				
			
			
				
					
						
							
						
						


	

		
		

			
		

		
			
 Answer this question...

		
		

			

				
					×
					  Pasted as rich text.   Paste as plain text instead
				
			

		

		

			

				  Only 75 emoji are allowed.
			

		

		

			

				×
				  Your link has been automatically embedded.   Display as a link instead
			

		

		

			

			

		

		

			

				×
				  Your previous content has been restored.   Clear editor
			

		

		

			

				×
				  You cannot paste images directly. Upload or insert images from URL.
			

		

		
	

		
	

	

	

		

			×
			
		

		

	



						
					
				
					
				
					
				
			
			
    
				
					
						
					
						
					
						
							
  • 
								

    
	

    
								
							
    • 
						
					
				
				
					
  • 

	

    • 
				
			

		

	



			
		

	

	
		

			
				

					


    
          Share
    

    

        
        
            

            
        
    


				

			
			

				


			

			
		

	







	

		
			
				Go to question listing
			
		
	

	




						


	

		
    
			
				
					
					
  • 

    Similar Content
    

    
	
      
	
		
    • 
			
      
				


	
		Spllit
	

			
      
			
      
				
      Толщина шрифта
      
				By 


Spllit
      
				
					
      
						Столкнулся с такой проблемой, что Avocode неверно определяет тощину шрифта на макете в отличии от Photoshop.  

      


	На скринах видно, что Avocode показвает, что толщина выделенного текста 400px. Однако Photoshop показывает, что выделенный текст имеет толщину extrabold, что равняется 800px. 

      


	С чем это может быть связано и как это пофиксить

      


      

      
					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		vkapas
	

			
      
			
      
				
      Вместо Open Sans Condensed браузер рендерит системный шрифт
      
				By 


vkapas
      
				
					
      
						Подключаю с Google Fonts Open Sans Condensed, но какому бы не элементу не присваивал, вместо него браузер всегда рендерит системный шрифт — Liberation Serif в Ubuntu и Times New Roman в Windows.

      


	Другие шрифты, Open Sans или Roboto, например, применяются исправно, а именно с Open Sans Condensed загвоздка. Подключаю так (на самом деле эту строку генерит шаблон Drupal, я только указываю название шрифта в настройках темы):

      


<link type="text/css" rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans+Condensed" media="all">


	В итоге:

      


	 

      


	 

      


	В чём может быть причина такого поведения?

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		Temiks
	

			
      
			
      
				
      Рендеринг шрифта отличается на macOS и Windows
      
				By 


Temiks
      
				
					
      
						Здравствуйте.
      
	При выделении подключаемый шрифт на сайте рендерится по разному на macOS и Windows.
      
	Браузер Chrome последней версии.
      
	Вот так шрифт отображается на ОС Windows - идеально расположен по центру
      

      


	 

      


	А вот так уже на macOS. Шрифт смещен с центра к верху.

      


	

      


	 

      


	Сталкиваюсь не в первый раз с этой проблемой. В чем может быть проблема? Возможно кто-то сталкивался с подобным? В какую сторону копать в таком случае?

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		Frogg
	

			
      
			
      
				
      Свой шрифт(из интернета)
      
				By 


Frogg
      
				
					
      
						Здравствуйте, я бы хотел использовать пиксельных шрифт на сайте, скачал его из интернета, но не понял как использовать его.

      


	Интернет обсёрфил, не нашёл.

      


	Помогите пожалуйста.

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		Anastasiya
	

			
      
			
      
				
      Как найти автора шрифта
      
				By 


Anastasiya
      
				
					
      
						Подскажите как найти автора шрифта - на сайте https://www.myfonts.com есть имя автора но контактов нет, и как купить шрифт у автора?

      

					
      
				
			
      
		
      • 
	
	
    

    • 
				
			
		

	


					

					


	

		
		
		
		


	

		
	


	


					

				

			

			
		

		
			
			



	

		×
		


    
	





			
				

					
				

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    • 
				
			

		

	




			







	




	







	

		

			

				
Important Information

				
We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

			

			

				  I accept