freeCodeCamp/import-a-google-font.spanish.md at 0e263c6a9c86fa3771d0f439afb51a22d3b03a89

Files

S.Hale 3920b7c4ce Corrected capitalization, corrected to American spellings and typos (#30685 )

* Translate challenge subtitles and example challenge text to Spanish

* Corrected errors in syntax and punctuation

* Multiple corrections of it/s to its plus other grammar corrections

* Correction and added paragraph to CSS Flex article

* Corrected my own typo

* Corrected capitalization, American spellings and typos

2018-11-07 10:34:13 -05:00

4.5 KiB

Raw Blame History

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf08807	Import a Google Font	0		Importar una fuente de Google

Descripción

Además de especificar las fuentes comunes que se encuentran en la mayoría de los sistemas operativos, también podemos especificar fuentes web personalizadas y no estándar para su uso en nuestro sitio web. Existen varias fuentes de fuentes web en Internet, pero, para este ejemplo, nos centraremos en la biblioteca de fuentes de Google. Google Fonts es una biblioteca gratuita de fuentes web que puede utilizar en su CSS haciendo referencia a la URL de la fuente. Entonces, sigamos adelante, importemos y apliquemos una fuente de Google (tenga en cuenta que si Google está bloqueado en su país, deberá saltarse este desafío). Para importar una fuente de Google, puede copiar la URL de la (s) fuente (s) de la biblioteca de fuentes de Google y luego pegarla en su HTML. Para este desafío, importaremos la fuente Lobster . Para hacer esto, copie el siguiente fragmento de código y péguelo en la parte superior de su editor de código (antes del elemento de style apertura): <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> Ahora puede usar la fuente Lobster en su CSS usando Lobster como FAMILY_NAME como en el siguiente ejemplo:
font-family: FAMILY_NAME, GENERIC_NAME; . GENERIC_NAME es opcional y es una fuente alternativa en caso de que la otra fuente especificada no esté disponible. Esto está cubierto en el próximo desafío. Los nombres de las familias distinguen entre mayúsculas y minúsculas y deben estar entre comillas si hay un espacio en el nombre. Por ejemplo, necesita citas para usar la fuente "Open Sans" , pero no para usar la fuente Lobster .

Instrucciones

Cree una regla CSS de la font-family que use la fuente Lobster y asegúrese de que se aplicará a su elemento h2 .

Pruebas

tests:
  - text: Importar la fuente de la <code>Lobster</code> .
    testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the <code>Lobster</code> font.");'
  - text: Tu elemento <code>h2</code> debe usar la fuente <code>Lobster</code> .
    testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your <code>h2</code> element should use the font <code>Lobster</code>.");'
  - text: Utilice un selector <code>h2</code> CSS para cambiar la fuente.
    testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an <code>h2</code> CSS selector to change the font.");'
  - text: Tu elemento <code>p</code> debería seguir utilizando la fuente <code>monospace</code> .
    testString: 'assert($("p").css("font-family").match(/monospace/i), "Your <code>p</code> element should still use the font <code>monospace</code>.");'

Challenge Seed

<style>
  .red-text {
    color: red;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

   <div>
    <p>Cosas que los gatos aman:</p>
    <ul>
      <li>pellizco de gato</li>
      <li>punteros laser</li>
      <li>lasaña</li>
    </ul>
    <p>3 cosas que odian los gatos:</p>
    <ol>
      <li>tratamiento de pulgas</li>
      <li>trueno</li>
      <li>otros gatos</li>
    </ol>
  </div>

  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Interior</label>
    <label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
    <label><input type="checkbox" name="personality" checked> Amoroso</label>
    <label><input type="checkbox" name="personality"> Perezoso</label>
    <label><input type="checkbox" name="personality"> Energético</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Enviar</button>
  </form>
</main>

Solución

// solution required

4.5 KiB Raw Blame History