Duda sobre fuentes en CSS

suaveSHOW #1 Jun '09

Hola me pase por un blog que estaba discutiendo sobre IE, como casi siempre xD y al abrir la pagina en la que mostraba las mentiras que dicen sobre su explorador vi un suavizado de fuente que me gustaría saber como lo han realizado.

http://www.microsoft.com/windows/internet-explorer/get-the-facts/browser-comparison.aspx

Screen de lo que busco: http://suavez.com/suavez/screen.jpg

El caso es que estuve intentando encontrar el codigo css de este pero no lo he encontrado, gracias por adelantado.

Nos vemos.

Crawler #2 Jun '09

mirando la página, no veo el mismo suavizado que en tu imagen, excepto en internet explorer 7 (y 8) que llevan el suavizado de fuentes incorporado (cleartype)

Asi que, sin poder haber visto lo que comentas, te diría que es del navegador, y que la mejor manera que existe para incluir fuentes con suavizado, o fuentes propias y demás, se llama sIFR, del cual tienes varias versiones (basado en javascript, javascript+phpGD,javascript+flash...)

djtonight #3 Jun '09 fap caster

Segoe UI,Arial,Verdana,Helvetica,sans-serif
font-size:100%;
font-style:italic;
left:20px;
position:relative;

te refieres a las letras de abajo negras?

edit: css:

html {
height:100%;
}
body {
font-family:Segoe UI,Arial,Verdana,Helvetica,sans-serif;
height:100%;
margin:0;
}
img {
border:medium none;
}
img.marginRight {
margin-right:10px;
}
img.marginLeft {
margin-left:4px;
}
img.marginBottom {
margin-bottom:15px;
}
img.marginTop {
margin-top:5px;
}
img.noMarginTop {
margin-top:0;
}
img.buy_paddingTop {
padding-top:3px;
}
img.paddingTopQuickStart {
padding-top:8px;
}
img.compareEditions {
float:left;
margin:0;
padding:0;
}
img.hero {
float:left;
margin:0;
padding:0;
}
img.help-how-to {
margin-bottom:50px;
}
p {
color:#4E4E4E;
font-family:Segoe UI,Arial,Verdana,Helvetica,sans-serif;
font-size:13px;
line-height:1.5em;
margin:0.25em 0 15px;
}
p.free-movies {
color:#F58220;
font-family:Segoe UI,Arial,Verdana,Helvetica,sans-serif;
font-size:22px;
font-weight:bold;
line-height:1.2em;
margin:0 0 25px;
padding:0;
}
p.listitems {
color:#4E4E4E;
font-size:13px;
line-height:1.5em;
margin:0.25em 0 0;
}
p.compareEditions {
width:115px;
}
p.nomargin {
margin:0;
}
p.disclaimer {
color:#888888;
font-size:10px;
line-height:1.5em;
margin:0 0 0 180px;
padding:0;
text-align:right;
}
p.disclaimer a, p.disclaimer a:visited {
color:#005A88;
font-size:10px;
line-height:1.5em;
text-decoration:none;
}
p.disclaimer a:active {
color:#F58220;
font-size:10px;
}
p.disclaimer a:hover {
color:#138CDD;
font-size:10px;
}
p.intro {
color:#808080;
font-family:arial;
font-size:16px;
line-height:1.5em;
margin:0 0 30px;
padding:0;
}
p.intro a {
color:#005A88;
font-family:arial;
font-size:16px;
line-height:1.5em;
text-decoration:none;
}
p.intro a:hover {
color:#138CDD;
font-family:arial;
font-size:16px;
text-decoration:underline;
}
p.intro a:visited {
color:#005A88;
font-family:arial;
font-size:16px;
text-decoration:none;
}
p.intro a:visited:hover {
font-family:arial;
font-size:16px;
text-decoration:underline;
}
p.intro a:active {
color:#F58220;
font-family:arial;
font-size:16px;
text-decoration:underline;
}
a:link {
color:#005A88;
font-size:13px;
text-decoration:none;
}
a:hover {
color:#138CDD;
text-decoration:underline;
}
a:visited {
color:#005A88;
font-size:13px;
text-decoration:none;
}
a:visited:hover {
text-decoration:underline;
}
a:active {
color:#F58220;
font-size:13px;
}
h1 {
color:#646464;
font-size:20px;
font-weight:lighter;
margin:0 0 20px;
}
h1.productTitle {
color:#3A3A3A;
font-size:22px;
margin:0 0 20px;
}
h1#titleIndent {
margin-left:20px;
}
h2 {
color:#F58220;
font-size:18px;
font-weight:lighter;
line-height:24px;
margin:25px 0;
padding:0;
}
h2.vistaHome {
margin:5px 0 25px;
}
h2.noTopmargin {
margin:0 0 15px;
}
h2.bottomMargin {
margin:25px 0 15px;
}
h2.topBottommargin {
margin:30px 0 15px;
}
h3 {
color:#646464;
font-size:14px;
margin:5px 0;
}
h4 {
color:#888888;
font-size:16px;
margin-bottom:9px;
padding:0;
}
h5 {
color:#F58220;
font-size:16px;
font-weight:normal;
margin-bottom:7px;
padding:0;
}
h5.negativeMargin {
margin-top:-20px;
}
h6 {
color:#4E4E4E;
font-size:14px;
font-weight:bold;
margin-bottom:7px;
}
h6.greenText {
color:#19B300;
font-size:14px;
font-weight:lighter;
line-height:1em;
margin:5px 0;
text-decoration:none;
}
ul {
color:#4E4E4E;
font-size:12px;
list-style-type:square;
margin:0 0 12px 27px;
padding:0;
}
ul ul {
list-style-type:square;
}
ul p {
margin:0;
padding:0;
}
ul li p {
line-height:1.5em;
padding:3px;
}
ul.intro {
margin-top:-30px;
}
ul.disc {
padding:0 0 0 455px;
}
ul.noListStyleType {
list-style-type:none;
}
ul.help-how-to {
margin:0 0 12px 137px;
padding:0;
}
.ftp_scenario_learn ul li {
list-style-type:disc;
}
ol {
color:#4E4E4E;
font-size:13px;
list-style-type:decimal;
margin:0 0 0 30px;
padding:0;
}
ol p {
margin:0;
padding:0;
}
ol li p {
line-height:1.5em;
padding:3px;
}
ol.numberMarginLeft {
margin-left:500px;
}
#baseHeader {
color:#000000;
height:129px;
padding:0 25px;
position:relative;
z-index:1000;
}
#baseHeader a {
color:#000000;
}
#baseHeader .masthead_header_container {
width:100%;
}
#baseHeader a:active, #baseHeader a:hover {
}
#header_left {
float:left;
padding:0;
width:60%;
}
#header_windows_logo {
margin:34px 0 14px 1px;
}
#header_right {
float:right;
padding:6px 0 0;
text-align:right;
width:30%;
}
#search_placeholder {
height:38px;
}
#search_provider {
font-family:Tahoma;
font-size:11px;
margin-top:3px;
}
#search_provider img {
vertical-align:middle;
}
.masthead_country {
color:#333333;
font-weight:bold;
margin-right:10px;
}
.masthead_pipe {
padding:0 8px;
}
#masthead_search {
position:absolute;
text-align:right;
top:37px;
width:984px;
}
#masthead_search form {
position:relative;
right:35px;
}
#mastheadLinks {
float:right;
font-family:segoe ui,verdana,arial,sans-serif;
font-size:13px;
line-height:20px;
margin-right:3px;
}
#mastheadLinks a {
color:#0066CC;
font-family:segoe ui,verdana,arial,sans-serif;
font-size:13px;
}
input#Submit1 {
width:42px;
}
#base_page_footer, #base_page_footer a {
color:#0066CC;
font-family:segoe ui,verdana,arial,sans-serif;
font-size:1em;
padding:0;
}
#footer_windows {
clear:both;
float:left;
margin-left:1px;
padding-top:0;
width:105px;
}
#footer_links {
float:right;
margin-right:10px;
padding-top:6px;
text-align:right;
width:670px;
}
.footer_pipe {
padding:0 0 0 5px;
}
#footer_microsoft {
color:#000000;
float:right;
font-size:9px;
margin:7px 0 0 10px;
width:84px;
}
body {
background-color:#DAF3FD;
}
#content_bkg, #base_page_footer, #masthead_search_wrapper {
margin:0 auto;
width:984px;
}
#basePageFrame {
padding:0 12px 0 14px;
}
#body_indented {
margin:0 20px;
}
#top_bkg {
background-color:#DAF3FD;
clear:both;
}
#content_bkg {
background-image:url(../images/bg_span_wol.gif);
background-repeat:repeat-y;
}
#basePageFrame {
background-image:url(../images/header_bkg_wol.jpg);
background-repeat:no-repeat;
height:100%;
}
#footer_bkg {
background-image:url(../images/bg_footer_gradient_wol.gif);
background-repeat:repeat-x;
}
#base_page_footer {
background-image:url(../images/bg_footer_image_wol.jpg);
background-repeat:no-repeat;
height:131px;
margin:0 auto;
padding:0;
}
#footer_internal {
padding:61px 40px 0 39px;
}
.product_logo {
text-align:right;
}
.cf:after {
clear:both;
content:".";
display:block;
height:0;
line-height:0;
visibility:hidden;
}
.cf {
display:inline-block;
}
html[xmlns] .cf {
display:block;
}
* html .cf {
height:1%;
}
.crosslink h6.greenText {
color:#19B300;
margin:0;
padding:0;
text-decoration:none;
}
.crosslink h6.zIndex {
margin-top:-36px;
width:75%;
z-index:1000;
}
.crosslink h6.greenText a {
color:#19B300;
font-size:14px;
margin:0;
padding:0;
}
.crosslink h6.greenText a:hover {
text-decoration:none;
}
.design h6.greenText {
color:#19B300;
margin:0;
}
#article_right .design h6.greenText a {
color:#19B300;
font-size:14px;
line-height:1em;
margin:40px 0 0;
padding:0;
}
.crosslink h6.greenTextTop {
color:#19B300;
font-size:14px;
font-weight:lighter;
line-height:1em;
margin:5px 0 0;
padding-top:18px;
text-decoration:none;
}
.crosslink h6.greenTextTop a {
color:#19B300;
font-size:14px;
font-weight:lighter;
line-height:1em;
margin:0;
padding:0;
text-decoration:none;
}
.crosslink p, .call_to_action p {
font-family:Segoe UI,arial;
font-size:11px;
line-height:1.2em;
margin:10px 0 0;
padding:0;
}
.call_to_action a:hover {
color:#138CDD;
}
.call_to_action p a.underline:link {
text-decoration:none;
}
.crosslink p a.underline:hover, .call_to_action p a.underline:hover {
text-decoration:underline;
}
.crosslink a {
cursor:pointer;
margin:0;
padding:0;
text-decoration:none;
}
.crosslink p a:link {
cursor:pointer;
margin:0;
padding:0;
text-decoration:none;
}
.crosslink p a:hover {
cursor:pointer;
margin:0;
padding:0;
text-decoration:none;
}
.crosslink_image_left {
float:left;
margin:0;
padding:0 8px 0 0;
}
.crosslink_image_right {
float:right;
margin:0;
padding:0 2px 8px 8px;
}
.call_to_action {
background-position:left top;
background-repeat:no-repeat;
margin:20px 0 0;
min-height:65px;
padding:7px 0 0;
}
.ctaDefault {
background-image:url(../images/crosslinks/cta.gif);
}
.cta101 {
background-image:url(../images/crosslinks/cta_aio.gif);
}
.cta102 {
background-image:url(../images/crosslinks/cta_ie.gif);
}
.cta103 {
background-image:url(../images/crosslinks/cta_ie.gif);
}
.cta104 {
background-image:url(../images/crosslinks/cta_phone_3.gif);
}
.cta105 {
background-image:url(../images/crosslinks/cta_system.gif);
}
.cta108 {
background-image:url(../images/crosslinks/cta_ie8_videocapture.jpg);
}
.cta109 {
background-image:url(../images/crosslinks/cta_security.gif);
}
.cta110 {
background-image:url(../images/crosslinks/cta_home.gif);
}
.cta111 {
background-image:url(../images/crosslinks/cta_home.gif);
}
.cta112 {
background-image:url(../images/crosslinks/CTA_jellyvision2.gif);
}
.cta114 {
background-image:url(../images/crosslinks/CTA_smallbusiness.gif);
}
.cta115 {
background-image:url(../images/crosslinks/CXL_wmc_logo.gif);
}
.cta116 {
background-image:url(../images/crosslinks/CTA_vistaupgrade.gif);
}
.cta118 {
background-image:url(../images/crosslinks/CTA_10vistafacts.gif);
}
.cta119 {
background-image:url(../images/crosslinks/CTA_ie8_tour.gif);
}
.cta120 {
background-image:url(../images/crosslinks/cta_system.gif);
}
.cta123 {
background-image:url(../images/crosslinks/CTA_watchvideos.gif);
}
.cta124 {
background-image:url(../images/crosslinks/CTA_watchvideos.gif);
}
.cta125 {
margin-top:-35px;
}
.cta126 {
background-image:url(../images/crosslinks/CTA_toolkit.gif);
}
.cta127 {
background-image:url(../images/crosslinks/CTA_feedback_1.gif);
}
.cta128 {
background-image:url(../images/crosslinks/CTA_win7_enterprise.gif);
}
.cta129 {
background-image:url(../images/crosslinks/CTA_feedback_1.gif);
}
.cta130 {
background-image:url(../images/crosslinks/CTA_Sustainable_2.gif);
}
.cta131 {
background-image:url(../images/crosslinks/cta_ie8_download.gif);
}
.cta132 {
background-image:url(../images/crosslinks/cta_download.gif);
}
.cta134 {
background-image:url(../images/crosslinks/CTA_VDI_getmore.gif);
}
.cta135 {
background-image:url(../images/crosslinks/CTA_VDI_facts.gif);
}
.cta136 {
background-image:url(../images/crosslinks/CTA_VDI_organization.gif);
}
.cta137 {
background-image:url(../images/crosslinks/CTA_technet.gif);
}
.cta138 {
background-image:url(../images/crosslinks/cta_download.gif);
}
.cta133 {
background-image:url(../images/crosslinks/CTA_vpc.gif);
}
.cta139 {
background-image:url(../images/crosslinks/CTA_feedback_1.gif);
}
.cta140 {
background-image:url(../images/crosslinks/CTA_win7_sw.gif);
}
.cta141 {
background-image:url(../images/crosslinks/CTA_casestudy.gif);
}
.cta142 {
background-image:url(../images/crosslinks/CTA_explorefeatures.gif);
}
.cta143 {
background-image:url(../images/crosslinks/CTA_sp2.gif);
}
.cta144 {
background-image:url(../images/crosslinks/CTA_deployment.gif);
}
.cta145 {
background-image:url(../images/crosslinks/CTA_ie8.gif);
}
.cta146 {
background-image:url(../images/crosslinks/CTA_casestudy.gif);
}
.cta147 {
background-image:url(../images/crosslinks/CTA_deployment.gif);
}
.cta148 {
background-image:url(../images/crosslinks/CTA_explorefeatures.gif);
}
.cta149 {
background-image:url(../images/crosslinks/CTA_security.gif);
}
.cta150 {
background-image:url(../images/crosslinks/CTA_casestudy.gif);
}
.cta151 {
background-image:url(../images/crosslinks/CTA_casestudy.gif);
}
.cta152 {
background-image:url(../images/crosslinks/CTA_clock.gif);
}
.cta153 {
background-image:url(../images/crosslinks/CTA_calculate.gif);
}
.cta154 {
background-image:url(../images/crosslinks/CTA_video.gif);
}
.cta155 {
background-image:url(../images/crosslinks/CTA_whitepaper.gif);
}
.cta156 {
background-image:url(../images/crosslinks/CTA_prebuy_win7pro.gif);
}
.call_to_action.crosslink.cta131 div.space {
height:0;
}
.call_to_action .space {
float:right;
height:50px;
text-decoration:none;
width:70px;
}
.crosslink_divider {
margin:0 0 18px;
padding:5px 0 0;
}
.crosslink_dividerwmc {
margin:0 0 18px;
padding:5px 0 0;
}
.cta_divider {
margin:19px 0 18px;
}
.crosslink_btm_divider {
background:transparent url(/windows/framework/images/crosslinks/fadeline_180_rr.gif) no-repeat scroll center bottom;
margin-bottom:18px;
padding-bottom:1px;
}
.ctaDividerRight {
background-image:url(../images/downloads/hdr_line_rr_180x5.gif);
background-repeat:no-repeat;
height:5px;
margin:16px 0 13px;
width:180px;
}
.crosslinkDividerRight {
background-image:url(../images/downloads/hdr_line_rr_180x5.gif);
background-repeat:no-repeat;
height:5px;
margin:9px 0 18px;
width:180px;
}
.ctaBuyDividerRight {
background-image:url(../images/downloads/hdr_line_rr_180x5.gif);
background-repeat:no-repeat;
height:5px;
margin:16px 0 18px;
width:180px;
}
div.clear {
clear:both;
}
div.float_left_screenshot p.caption {
text-align:left;
}
.pointer {
cursor:pointer;
}
#productList {
border-bottom-color:#93B5D1;
height:auto;
margin-left:16px;
margin-right:16px;
position:relative;
width:154px;
z-index:5001;
}
#productList p {
color:#4E4E4E;
font-weight:bold;
margin:0;
padding-top:7px;
}
#productList a {
font-size:90%;
}
#productList p a:active, #productList p a:link, #productList p a:visited {
color:#4E4E4E;
text-decoration:none;
}
#productList p a:hover {
color:#138CDD;
text-decoration:none;
}
#productDropdown {
background-color:#FFFFFF;
background-image:url(/windows/Framework/images/menu_flyout_bkg.gif);
background-position:center bottom;
background-repeat:repeat-x;
border:1px solid #9EB5D1;
display:none;
height:auto;
left:0;
margin:29px 0 0 62px;
position:absolute;
width:185px;
z-index:1000;
}
#productDropdownKnot {
display:none;
}
#productDropdown_shadow {
background-color:transparent;
border-bottom:3px solid #9EB5D1;
border-right:3px solid #9EB5D1;
height:100%;
left:4px;
margin:1px 0 0;
opacity:0.75;
padding:0;
position:absolute;
top:0;
width:182px;
z-index:-10;
}
.products_on a {
background-color:#FFFFFF;
border-color:#9EB5D1 #9EB5D1 -moz-use-text-color;
border-style:solid solid none;
border-width:1px 1px medium;
display:block;
height:29px;
padding:0 10px;
position:relative;
z-index:1001;
}
.products_on {
padding-top:0 !important;
}
.products_off a {
background-color:transparent;
padding:0 11px;
}
#descriptions {
font-size:11pt;
line-height:15pt;
}
.productListItems {
border-bottom:1px solid #9EB5D1;
padding-bottom:10px;
padding-left:12px;
}
.productListItems p {
line-height:10pt;
padding-bottom:5px;
}
.productListItems_all {
padding-bottom:10px;
padding-left:12px;
}
productlist div {
padding:0 0 10px 10px;
}
.productDropdownLogo {
height:45px;
margin-top:40px;
}
#productDropdownScreenshot {
background-image:url(/windows/framework/images/menu_screen_shadow.gif);
background-position:center bottom;
background-repeat:no-repeat;
display:none;
height:112px;
margin-right:16px;
padding-bottom:8px;
width:130px;
}
.productDropdownDescription {
color:#4E4E4E;
font-size:12pt;
line-height:13.5pt;
width:172px;
}
.content_image_margin_left {
margin:10px 10px 0 0;
}
.content_image_margin_left_no_margin {
margin:0 10px 0 0;
}
#buySpecialOffers .content_image_margin_left {
margin:0 10px 15px 0;
}
.content_image_margin_right {
margin:0 0 10px 10px;
}
.content_image_margin_left_no_top {
margin:0 10px 0 0;
}
.hidden {
display:none;
}
.submit_button input {
line-height:16px;
vertical-align:middle;
}
#featureVersion .contentrow td {
height:26px;
}
#browseDownloadsTitle h2 {
margin:25px 0 5px;
padding:0;
}
.serviceErrorMessage {
margin:7px 0 10px 11px;
}
#anchorTitle {
float:left;
line-height:1.7em;
margin-right:10px;
}
.anchor {
color:#4E4E4E;
float:left;
line-height:1.5em;
margin-right:10px;
}
.anchorLink {
margin-right:10px;
}
.anchorLink a:hover {
color:#138CDD;
}
.clear {
clear:both;
}
.prodDivider {
background-image:url(../images/div_line_705.gif);
background-repeat:no-repeat;
clear:both;
height:5px;
margin-bottom:15px;
width:705px;
}
#smallHeroTop {
margin:15px 0 5px;
width:189px;
}
.campaign_top {
padding-bottom:5px;
}
.feedbackLink {
color:#000000;
cursor:pointer;
font-family:Tahoma;
font-size:11px;
text-decoration:none;
}
.feedbackLink:hover {
text-decoration:underline;
}
#accessibility {
font-size:1px;
position:absolute;
top:-9999px;
}
#logoleft {
margin-left:150px;
margin-right:100px;
}
.listmargin {
margin-left:150px;
}
#wmcget_betterwithItems, #wmcget_requiredItems {
min-height:95px;
}
tr.hidden {
display:none;
}
tr.visible {
}
#footer_links p {
color:#333333;
}
#wol_header_nav li, .product_navigation_wrapper {
font-family:Segoe UI,Verdana,Arial,Sans-Serif;

suaveSHOW #4 Jun '09

Parece ser que es la fuente Segoe, creada por windows, pork te la instala el MSN Live creo.

Gracias por todo, y #2, no es necesario que metas las 1000 lineas de código xD.

erdanblo #5 Jun '09 Inocente

Es de las nuevas, junto a la Candara, Calibri, consolas y compañia (que vienen con el vista).

suaveSHOW #6 Jun '09

Bueno, he puesto ahora en un estilo la fuente segoe, se ve como yo quería, y otra duda que me surgió, es si existe la manera de que si el ususuario no tiene esa fuente instalada le carge otro estilo.

erdanblo #7 Jun '09 Inocente

font-family: Nombrefuente, sans-serif;

En el caso de no encontrar NombreFuente, cargará la sans-serif que tenga configurada el navegador. También puedes poner "serif".

Ya si lo que quieres es forzar el uso de una fuente, tienes que hacer uso de javascript/flash, cosa que no te aconsejo, o pasarte a HTML5 que ya contempla.

NeB1 #8 Jun '09

#7 usando el http://www.microsoft.com/typography/WEFT.mspx conviertes tus fuentes en .eot, la guardas en tu servidor y en CSS usas:

@font-face {
font-family: Bradley Hand ITC;
font-style: normal;
font-weight: normal;
src: url('BRADLEY0.eot');

}

 #container {
	position:absolute;
	height:768px;
	width:1024px;
	margin:0px 0px 0px -512px;
	font-family: Bradley Hand ITC;
	left:50%;
	background-color:#fff;
	text-align: center;
}

(he puesto una fuente de ejemplo)
va de maravilla, texto seleccionable, no tarda en cargar y na, eso xD

erdanblo #9 Jun '09 Inocente

#8 ¿Eso valida? ¿Funciona en todos los navegadores bajo cualquier sistema operativo?

Lo dudo.

Yo para usar mierdas, mejor no las uso. De hehco, para hacer eso, tiro por HTML5 y ya esta. Sí, IE no va a ir, pero ya es casi estándar (creo). Y el resto de navegadores ya lo renderizan.

http://www.microsoft.com/typography/web/embedding/weft3/available.aspx

No todas las fuentes son compatibles.

NeB1 #10 Jun '09

#9 probado en firefox, opera, chrome y ie6/7, ubunto 8 y windows xP/Vista

no van todas las fuentes, pero para la compatibilidad que tiene dá bastante juego, a mí me ha ido perfercto en las webs que lo he usado

guner #11 Jun '09

Un poco pronto para empezar a usar CSS 3

http://www.w3.org/TR/css3-fonts/#the-font-face-rule

Usuarios habituales