Coisas que eu quero fazer
Em HTML, você pode usar o estilo `-webkit-text-stroke` para adicionar um contorno ao texto. (Embora tenha `-webkit` no nome, aparentemente funciona também no Firefox e no Safari. Confirmei que funciona no Firefox.)
No entanto, seu funcionamento é questionável na prática, então explicarei como funciona e sugerirei alternativas.
Instruções de uso simples
O uso básico é o seguinte:
-webkit-text-stroke: 幅 色;exemplo:
-webkit-text-stroke: 1px red;Verificação de operação
Vamos examinar o comportamento do seguinte HTML.
<p style="font-family: system-ui;font-size: 96px;-webkit-text-stroke: 2px red;"
>あいうえお ABCD</p>Chrome (135.0.7049.115):
Firefox (138.0):
As configurações acima parecem ser exibidas corretamente no Chrome/Firefox.
Em seguida, vejamos como funciona o seguinte HTML. (A fonte foi alterada de system-ui para serif.)
<p style="font-family: serif;font-size: 96px;-webkit-text-stroke: 2px red;"
>あいうえお ABCD</p>Chrome (135.0.7049.115):
Firefox (138.0):
Com essas configurações, a imagem é exibida corretamente no Firefox, mas no Chrome, as bordas também se sobrepõem onde deveriam. Acho que esse resultado é indesejável para muitas pessoas, inclusive para mim.
Em seguida, vamos analisar o comportamento do seguinte HTML. (A largura do traço foi alterada de 2 para 10.)
<p style="font-family: system-ui;font-size: 96px;-webkit-text-stroke: 10px red;"
>あいうえお ABCD</p>Chrome (135.0.7049.115):
Firefox (138.0):
Com essa configuração, nem o Chrome nem o Firefox exibem texto preto; em vez disso, ele aparece preenchido com a cor do contorno. (Embora isso possa ter suas utilidades), acho que é um resultado indesejável para muitas pessoas, inclusive para mim.
Caso Alternativo
Conforme mencionado acima, -webkit-text-stroke frequentemente não funciona como esperado.
Aqui, exibiremos uma borda ao redor do texto usando um método diferente.
Usando TextShadow
Experimente o seguinte código.
Ao exibir repetidamente uma sombra de texto desfocada no mesmo local, cria-se o efeito de uma borda.
(Reduzir o número de sombras de texto desfocará a borda.)
<p style="font-family: serif;font-size: 96px;text-shadow: 0px 0px 5px red,0px 0px 5px red,0px 0px 5px red,0px 0px 5px red,0px 0px 5px red,0px 0px 5px red,0px 0px 5px red,0px 0px 5px red,0px 0px 5px red;"
>あいうえお ABCD</p>Chrome (135.0.7049.115):
Firefox (138.0):
Com essas configurações, tanto o Chrome quanto o Firefox exibiram o conteúdo conforme o esperado.
Usando TextShadow
Experimente o seguinte código.
Ao exibir uma sombra de texto não desfocada várias vezes com pequenas variações, cria-se o efeito de uma borda.
<p style="font-family: serif;font-size: 96px;text-shadow: 0px 0px red,1px 0px red,0px 1px red;1px 1px red"
>あいうえお ABCD</p>Chrome (135.0.7049.115):
Firefox (138.0):
Eu consegui.
No entanto, como mencionado acima, se o texto for grande, a borda fica quase invisível.
(Você provavelmente conseguiria um resultado mais realista desenhando várias imagens com um pequeno deslocamento, mas isso não seria prático sem escrever um roteiro.)
Se o texto for pequeno, será exibido como mostrado abaixo, o que não é um problema.
-webkit-text-stroke e posição de exibição fixa
Experimente o seguinte código.
O método `-webkit-text-stroke` é usado para desenhar uma string com o corpo do caractere e a borda preenchidos e, ao escrever a mesma string na mesma posição, o corpo do caractere e a borda são desenhados novamente.
<div style="position:relative;font-size: 96px;font-family: serif;">
<div style="-webkit-text-stroke: 10px red">あいうえお ABCD</div>
<div style="position:absolute;top:0px">あいうえお ABCD</div>
<div>Chrome (135.0.7049.115):
Firefox (138.0):
Com essas configurações, tanto o Chrome quanto o Firefox exibiram o conteúdo conforme o esperado.
Resultado
Confirmei que o parâmetro -webkit-text-stroke está funcionando corretamente.
Além disso, para configurações que não funcionaram como esperado com -webkit-text-stroke, a solução alternativa me permitiu exibi-las no estilo pretendido.
コメント