Como adicionar fontes
21/05/2014
0
Claudio Aguiar
Posts
21/05/2014
Joel Rodrigues
22/05/2014
Raphael Souza
22/05/2014
Claudio Aguiar
tinha esquecido totalmente, é esse aqui:
[url]http://designshack.net/articles/css/creating-a-fun-animated-navigation-menu-with-pure-css/[/url]
Joel, da uma olhada nele, pois tentei fazer atraves do mesmo, tem esse comando que citou.
22/05/2014
Claudio Aguiar
em portugues é bem melhor para entender, vou ver se consigo revolver essa questão, obrigado.
22/05/2014
Raphael Souza
em portugues é bem melhor para entender, vou ver se consigo revolver essa questão, obrigado.
;)
23/05/2014
Claudio Aguiar
Marisiana, viu o tutorial?
23/05/2014
Claudio Aguiar
html
<html> <head> <meta charset="utf-8"> <meta name="description" content="description"> <title>MENU</title> <link rel="stylesheet" media="screen" href="estilo.css"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>
eu baixei dois arquivos de fonte: 3Dumb, 2Dumb
modifiquei os nomes e nada
css
* { padding: 0; margin: 0; } body { background: #f4f1e5; color: #544738; font-family: helvetica, sans-serif; } ul li { float: left; list-style: none; margin-right: 1em; font-family: 'KulminoituvaRegular', helvetica, sans-serif; font-size: 25px; padding: 12px; } li a { color: #544738; text-decoration: none; float: left; } li a:hover { color: #7eb9be; } li a:hover { color: #7eb9be; } @font-face { font-family: 'KulminoituvaRegular'; src: url('kulminoituva-webfont.eot'); src: local('‚ò∫'), url('kulminoituva-webfont.woff') format('woff'), url('kulminoituva-webfont.ttf') format('truetype'), url('kulminoituva-webfont.svg#webfontHNAi9IoX') format('svg'); font-weight: normal; font-style: normal; }
23/05/2014
Raphael Souza
html
<html> <head> <meta charset="utf-8"> <meta name="description" content="description"> <title>MENU</title> <link rel="stylesheet" media="screen" href="estilo.css"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>
eu baixei dois arquivos de fonte: 3Dumb, 2Dumb
modifiquei os nomes e nada
css
* { padding: 0; margin: 0; } body { background: #f4f1e5; color: #544738; font-family: helvetica, sans-serif; } ul li { float: left; list-style: none; margin-right: 1em; font-family: 'KulminoituvaRegular', helvetica, sans-serif; font-size: 25px; padding: 12px; } li a { color: #544738; text-decoration: none; float: left; } li a:hover { color: #7eb9be; } li a:hover { color: #7eb9be; } @font-face { font-family: 'KulminoituvaRegular'; src: url('kulminoituva-webfont.eot'); src: local('‚ò∫'), url('kulminoituva-webfont.woff') format('woff'), url('kulminoituva-webfont.ttf') format('truetype'), url('kulminoituva-webfont.svg#webfontHNAi9IoX') format('svg'); font-weight: normal; font-style: normal; }
Estou achando a montagem desse seu @font-face muito estranha.
Segue um exemplo prático de como usar o parâmetro src:
Ps: exemplo a seguir com a font do Font Awesome
/* declaro o font-face */ @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.0.3'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } /* uso a fonte importada */ .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
23/05/2014
Claudio Aguiar
vou desistir desse, hehehe
Clique aqui para fazer login e interagir na Comunidade :)