2009-06-26 10 views
0

Cette fonte dans cette image de la WhiteHouse semble très professionnelle. Quelle est la police? Est-ce juste Times New Roman?Quelle est cette police? et CSS Aide

De même, quelqu'un sait-il comment utiliser CSS pour créer quelque chose comme l'image ci-dessous? (Ainsi je peux garder tout le reste dans cette image mais change le texte)

Merci!

alt text http://www.whitehouse.gov/assets/hero/hero_bkgd_united_we_serve.jpg

+2

Ceci est vraiment une façon d'utiliser la question de photoshop et pas une question de programmation. – ICodeForCoffee

+0

J'espérais pouvoir au moins faire fonctionner la police en html/css sans apprendre Photoshop. – chris

+2

S'il s'agit d'une police non standard/bizarre, vous ne pouvez pas garantir que les utilisateurs l'installeront sur leur ordinateur. La seule façon de garantir le rendu correct est d'utiliser une image. – ICodeForCoffee

Répondre

5

Vous pouvez utiliser un service de police comme WhatTheFont.com pour trouver une correspondance la plus proche. En ce qui concerne votre deuxième question, vous pouvez créer une table de la taille de votre image d'arrière-plan, et utiliser css pour définir l'arrière-plan de la table à cela. Ensuite, entrez simplement le texte dans la cellule du tableau et utilisez

style="text-align: center;" 

pour centrer le texte.

Vous pouvez utiliser Photoshop pour effacer le texte d'origine en arrière-plan, comme indiqué ci-dessus.

+1

Utilisez un div sur une table. – ryanulit

+0

Ce que ryanulit a dit - il n'y a pas de justification pour une table ici, et j'ajouterais que le style inline est sous-optimal par rapport à CSS appliqué aussi. – annakata

0
+0

Pensez-vous que je pourrais utiliser cette police en HTML/CSS? – chris

+0

Si les utilisateurs ont cette police installée sur leurs machines, sinon vous devez les avoir télécharger et l'installer ... –

+0

Si vous voulez créer une bannière, peut-être que vous devriez simplement avoir l'image créée sur votre serveur. Envisagez d'utiliser une bibliothèque graphique telle que GD pour ajouter par programme le texte à l'image d'arrière-plan. – futureelite7

2

Il ressemble à Garamond. Il est de la même police utilisée dans ce document:

http://www.hud.gov/united-we-serve/united-we-serve.pdf

Il se distingue par le fait que les lignes verticales à l'intérieur de la croix de W sur l'autre.

Afin d'utiliser la police avec succès sur votre page Web, il doit être installé sur l'ordinateur de l'utilisateur qui le regarde. Garamond est une police Adobe utilisée sur les ordinateurs Apple Mac, et elle est installée sur mon ordinateur Windows XP, donc j'imagine que presque tout le monde l'a déjà.

1

Vous pouvez créer ce type de look en utilisant vos skils de programmation (évitant ainsi photoshop) en utilisant SIFR. Cela fonctionne vraiment bien avec les sites dynamiques. Nous l'utilisons souvent (voir h1s here). Infos sur SIFR est here

0

Cufon peut fournir ce que vous devez intégrer une police non-système dans une page HTML: http://cufon.shoqolate.com/generate/

Il y a quelques mises en garde en matière de licences, et quelques problèmes de navigateur, mais ça marche plutôt bien pour la plupart - certainement mieux que sifr.

0

Garamond peut maintenant être concédé sous licence par Adobe pour une utilisation avec @ font-face à travers TypeKit. Donc, avec un peu de Font-face et de magie CSS3, vous pouvez très facilement créer cet effet sans avoir recours aux images.

Questions connexes