Le problème est, que j'ai besoin d'obtenir une police non standard (pas tout le monde l'a sur son ordinateur) avec effet (de Photoshop: Outer Glow) dans le site Web. Je peux utiliser Javascript (y compris jQuery) et CSS3 pour cela, mais cette police devrait être en mesure de mettre en évidence comme n'importe quel texte dans le web. Des solutions?Comment obtenir une police non standard avec effet dans l'utilisation du site Web?
P.S. Police: Titillium.
Pour pouvoir afficher la police Titillium comme tout autre texte, vous devez intégrer la police dans la page Web. Il existe de nombreux services en ligne qui peuvent vous aider à le faire. Avant l'intégration assurez-vous que la licence de la police vous permet d'intégrer la police, car peu de polices ne le permettent pas.
Voici un exemple pour l'incorporation des polices en utilisant CSS3:
@font-face{
font-family: 'Titillium';
src: url('Titillium.eot');
src: local('Titillium'), url('Titillium.ttf') format('truetype'), url('Titillium.woff') format('woff'), url('Titillium.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Comme vous le voyez ci-dessus, il existe différents formats de polices mêmes que j'ai mis. Ils sont là pour être compatibles avec le navigateur, par exemple: eot est supporté par Internet Explorer. WOFF est un format qui sera bientôt largement accepté par tous les navigateurs. Il existe de nombreux convertisseurs en ligne disponibles pour convertir une police. Vous pouvez google il choisir un meilleur pour vous-même.
est également l'incorporation des polices pris en charge dans les navigateurs suivants:
est ici l'effet de lueur que j'utilise toujours dans mes projets :)
HTML
<span id="glow">Hello World</span>
CSS
#glow{
font-weight:bold;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.6), 0 0 10px rgba(73, 167, 219, 0.5), 0 0 30px rgba(92, 214, 255, 0.7), 0 0 75px rgba(92, 214, 255, 0.8);
}
vous pouvez utiliser
Glowing font utilisation plugin jquery jQuery Text Glow Effect
Embedding police Titillium
@ font-face {
font-family: Titillium; Src: url (/location/of/font/Titillium.ttf) format ("truetype");
}
/* Utilisez ensuite comme vous le feriez pour tout autre police */
.Titillium {font-family: Titillium, Verdana, Helvetica, sans-serif;
}
Eh bien, il est assez simple, si vous pouvez choisir de ne pas soutenir IE8 et au-dessous de la partie de préchauffage.
Rendez-vous au http://www.fontsquirrel.com/fonts/TitilliumText et téléchargez le kit @ font-face fourni ici. Suivez les instructions d'installation et d'utilisation de @font-face pour votre site Web.
Ensuite, pour la lueur externe, vous pouvez utiliser la propriété text-shadow pour obtenir à peu près le même effet. Cela, par exemple, vous obtiendrez une lueur bleue de taille 3px:
text-shadow: 0 0 3px #7FDEFF;
Et vous avez terminé! Bien sûr, comme indiqué ci-dessus, IE8 et ci-dessous ne prennent pas en charge text-shadow, donc vous aurez juste à vivre avec ça.
Essayez Cufon http://github.com/sorccu/cufon/wiki/usage
Quelque chose que je aime personnellement à ce sujet est qu'il déclasse gracieusement pour ceux qui ont js désactivé de la manière que vous voulez.
Ma proposition:
Le deuxième et le troisième point peuvent être remplacés en mettant une image de texte brillant (qui peut être générée de façon dynamique, par ex. par PHP).
Cela semble compliqué, c'est seulement une alternative.(Honnêtement, j'aime la réponse de @Yi Jiang).
Pour briller plus forte utilisation plus d'une ombre: 'texte -shadow: 0 0 3px # 7FDEFF, 0 0 3px # 7FDEFF, 0 0 3px # 7FDEFF; ' – pepkin88
+1, IE ne vaut pas la peine – user187291
Tous ses utilisateurs auront cette police sur leurs machines est moyen? –