Bordo del testo utilizzando css (bordo attorno al testo)

108

C'è un modo per integrare un bordo attorno al testo come l'immagine qui sotto?

bordo del testo

text css

— jho1086
fonte

222

Usa più ombre di testo:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

inserisci qui la descrizione dell'immagine

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

Espandi lo snippet

In alternativa, puoi usare il tratto di testo, che funziona solo in webkit:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

inserisci qui la descrizione dell'immagine

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

Espandi lo snippet

Leggi anche di più come CSS-Tricks.

— bookcasey
fonte

DA NOTARE: Si prega di testare le capacità cross-browser di questi metodi ... Sto avendo seri problemi con i client su IE almeno 9 .. un po 'pensando di seguire la via PNG.

— ErickBest

1

@ErickBest Il secondo collegamento menziona i problemi di IE9. Anche se questa pagina non è stata difficile da trovare su google caniuse.com/css-textshadow

— AnnanFay

Provoca una cattiva visualizzazione del testo con trasparenza (usando rgba).

— Alejandro Nava

14

Sicuro. Potresti usare CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

Tuttavia non verrà visualizzato immediatamente in tutti i browser. Tuttavia, l' utilizzo di una libreria di script come Modernizr aiuterà a farlo bene nella maggior parte dei browser.

— jtheman
fonte

1

L'ho già provato, ma quello di cui ho bisogno è un testo bianco pieno intorno.

— jho1086

8

Non mi piacciono molte soluzioni basate sulla moltiplicazione delle ombre del testo, non è molto flessibile, potrebbe funzionare per un tratto di 2 pixel in cui le direzioni da aggiungere sono 8, ma con soli 3 pixel le direzioni del tratto diventano 16 e così via .. Non proprio comodo da gestire.

Lo strumento giusto esiste, è SVG <text> Il problema di supporto del browser non vale nulla in questo caso, perché anche l'uso di text-shadow ha il suo problema di supporto, filter: progid:DXImageTransformpuò essere utilizzato o IE <10 ma spesso non funziona come previsto.

Per me la soluzione migliore rimane SVG con un fallback nel testo non tratteggiato per browser meno recenti:

Questo tipo di approccio funziona praticamente su tutte le versioni di Chrome e Firefox, Safari dalla versione 3.04, Opera 8, IE 9

Rispetto ai text-shadowcui supporti sono: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, risulta ancora più compatibile.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

Espandi lo snippet

— holden
fonte

1

grazie per aver condiviso la tua soluzione. Penso che tu abbia ragione sia più flessibile. Ma la maggior parte delle volte è più efficiente usare i CSS. Proverò a utilizzare SVG più tardi.

— jho1086

6

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

— chezwhite
fonte

3

Puoi aggiungere anche una spiegazione?

— Robert

5

Quanto segue coprirà tutti i browser che vale la pena coprire:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */

— dtbarne
fonte