Fuentes externas e internas
La fuente interna es cuando el archivo se encuentra dentro de mi máquina o en mi sitio
José Corona Alcántara
Fuente Externa
Iker Daian Corona Carvajal
Propiedades de las fuentes font-family:Arial; Especifica el fuente
font-weight: bold; o 100px;(bold=700px, bolder=900px, normal=400px lighter=100px); Esto se puede poner en pixeles y depende del font que la tenga
font-style:normal; (normal, italic, oblique)
text-align:justify; (left, right, justify)
text-decoration:none; (underline, overline - línea arriba, line-through - Se tacha la letra)
text-transform:capitalize (primera letras en mayúscula); (uppercase o lowercase) se puede usar en un input para forzar la captura
Captura tú correo, solo acepta minúsculas:
font-variant:small-caps (pone todas en mayúsculas pero la primera letra es más grande)
text-indent:14px; identar el texto en pixeles, espacios al inicio del párrafo
letter-spacing:2px; Espacio entre letras, puede ser incluso negativo y se amontonan
word-spacing:10px; Espacio entre palabras, puede ser negativo
p.text:first-letter{}; Pseudoelemto para especificar el estilo de la primera letra
p.text:first-line{}; Pseudoelemto para especificar el estilo de la primera línea del párrafo, se supone que se ve el efecto
cuando el parrafo tiene varias líneas y por eso aquí le agregamos mucho texto
line-height: 20px; Espacio de interlineado. Si este valor es igual que la altura del contenedor donde está
entonces el texto se centra de forma vertical
Tipos de fuentes Rockwell: Egipcia, cosas clásicas, títulos cosas cortas
Garamound: Documentos de texto, romanas antigüas, tienen remates las letras para transmitir
antigüedad
Bodoni MT: Títulos o encabezados
Helvetica, Ubuntu: Textos largos, que de más facilidad de léctura
Segoe: Texto largos
Caligráficas como Vivaldi: No son las mejores para tetos largos
Fantasia (Jokerman Let): como para niños
Impact: Más de fantasía
El interlineado lo normal es un 10% del tamaño de la letra, quizás un 20%
Alineados a la derecha para textos como frases, títulos, números, pero no textos
largos
Alineado a la izquierda es mejor para textos largos, porque los justificados
crean mucho espacios
Los centrados textos cortos
Letras para leer ni naranjas, ni verdes, lo mejor es oscuras
Azul es muy relacionado con la tecnología
No usar más de 2 máximo 3 diferente tipos de fuentes
El texto mejor no de un lado a otro, lo mejor es dos columnas
Las fuentes de palo seco son las que traen las líneas más delgadas. Tienen
que ver más con cosas modernas de teconología por ejemplo
Las fuentes de palo grueso son para temas más tradicionales
Fuentes Vectoriales Se declara esta clase en el style:
.cIconnMoon::before{font-family:icomoon;}
Y luego se le declara la clase en el HTML junto con los vectores
class="cIconnMoon icon-home"
Se usan para no usar imágenes donde van símbolos, como las lupas, flechas
IcoMoon Se pueden añadir sus propios diseños
Te genera tus archivos y tu CSS
icon-home
icon-home2
icon-home3
icon-office
icon-newspaper
icon-pencil
icon-pencil2
icon-quill
icon-pen
icon-blog
icon-eyedropper
icon-droplet
icon-paint-format
icon-image
icon-images
icon-camera
icon-headphones
icon-music
icon-play
icon-film
icon-video-camera
icon-dice
icon-pacman
icon-spades
icon-clubs
icon-diamonds
icon-bullhorn
icon-connection
icon-podcast
icon-feed
icon-mic
icon-book
icon-books
icon-library
icon-file-text
icon-profile
icon-file-empty
icon-files-empty
icon-file-text2
icon-file-picture
icon-file-music
icon-file-play
icon-file-video
icon-file-zip
icon-copy
icon-paste
icon-stack
icon-folder
icon-folder-open
icon-folder-plus
icon-folder-minus
icon-folder-download
icon-folder-upload
icon-price-tag
icon-price-tags
icon-barcode
icon-qrcode
icon-ticket
icon-cart
icon-coin-dollar
icon-coin-euro
icon-coin-pound
icon-coin-yen
icon-credit-card
icon-calculator
icon-lifebuoy
icon-phone
icon-phone-hang-up
icon-address-book
icon-envelop
icon-pushpin
icon-location
icon-location2
icon-compass
icon-compass2
icon-map
icon-map2
icon-history
icon-clock
icon-clock2
icon-alarm
icon-bell
icon-stopwatch
icon-calendar
icon-printer
icon-keyboard
icon-display
icon-laptop
icon-mobile
icon-mobile2
icon-tablet
icon-tv
icon-drawer
icon-drawer2
icon-box-add
icon-box-remove
icon-download
icon-upload
icon-floppy-disk
icon-drive
icon-database
icon-undo
icon-redo
icon-undo2
icon-redo2
icon-forward
icon-reply
icon-bubble
icon-bubbles
icon-bubbles2
icon-bubble2
icon-bubbles3
icon-bubbles4
icon-user
icon-users
icon-user-plus
icon-user-minus
icon-user-check
icon-user-tie
icon-quotes-left
icon-quotes-right
icon-hour-glass
icon-spinner
icon-spinner2
icon-spinner3
icon-spinner4
icon-spinner5
icon-spinner6
icon-spinner7
icon-spinner8
icon-spinner9
icon-spinner10
icon-spinner11
icon-binoculars
icon-search
icon-zoom-in
icon-zoom-out
icon-enlarge
icon-shrink
icon-enlarge2
icon-shrink2
icon-key
icon-key2
icon-lock
icon-unlocked
icon-wrench
icon-equalizer
icon-equalizer2
icon-cog
icon-cogs
icon-hammer
icon-magic-wand
icon-aid-kit
icon-bug
icon-pie-chart
icon-stats-dots
icon-stats-bars
icon-stats-bars2
icon-trophy
icon-gift
icon-glass
icon-glass2
icon-mug
icon-spoon-knife
icon-leaf
icon-rocket
icon-meter
icon-meter2
icon-hammer2
icon-fire
icon-lab
icon-magnet
icon-bin
icon-bin2
icon-briefcase
icon-airplane
icon-truck
icon-road
icon-accessibility
icon-target
icon-shield
icon-power
icon-switch
icon-power-cord
icon-clipboard
icon-list-numbered
icon-list
icon-list2
icon-tree
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-cloud-check
icon-download2
icon-upload2
icon-download3
icon-upload3
icon-sphere
icon-earth
icon-link
icon-flag
icon-attachment
icon-eye
icon-eye-plus
icon-eye-minus
icon-eye-blocked
icon-bookmark
icon-bookmarks
icon-sun
icon-contrast
icon-brightness-contrast
icon-star-empty
icon-star-half
icon-star-full
icon-heart
icon-heart-broken
icon-man
icon-woman
icon-man-woman
icon-happy
icon-happy2
icon-smile
icon-smile2
icon-tongue
icon-tongue2
icon-sad
icon-sad2
icon-wink
icon-wink2
icon-grin
icon-grin2
icon-cool
icon-cool2
icon-angry
icon-angry2
icon-evil
icon-evil2
icon-shocked
icon-shocked2
icon-baffled
icon-baffled2
icon-confused
icon-confused2
icon-neutral
icon-neutral2
icon-hipster
icon-hipster2
icon-wondering
icon-wondering2
icon-sleepy
icon-sleepy2
icon-frustrated
icon-frustrated2
icon-crying
icon-crying2
icon-point-up
icon-point-right
icon-point-down
icon-point-left
icon-warning
icon-notification
icon-question
icon-plus
icon-minus
icon-info
icon-cancel-circle
icon-blocked
icon-cross
icon-checkmark
icon-checkmark2
icon-spell-check
icon-enter
icon-exit
icon-play2
icon-pause
icon-stop
icon-previous
icon-next
icon-backward
icon-forward2
icon-play3
icon-pause2
icon-stop2
icon-backward2
icon-forward3
icon-first
icon-last
icon-previous2
icon-next2
icon-eject
icon-volume-high
icon-volume-medium
icon-volume-low
icon-volume-mute
icon-volume-mute2
icon-volume-increase
icon-volume-decrease
icon-loop
icon-loop2
icon-infinite
icon-shuffle
icon-arrow-up-left
icon-arrow-up
icon-arrow-up-right
icon-arrow-right
icon-arrow-down-right
icon-arrow-down
icon-arrow-down-left
icon-arrow-left
icon-arrow-up-left2
icon-arrow-up2
icon-arrow-up-right2
icon-arrow-right2
icon-arrow-down-right2
icon-arrow-down2
icon-arrow-down-left2
icon-arrow-left2
icon-circle-up
icon-circle-right
icon-circle-down
icon-circle-left
icon-tab
icon-move-up
icon-move-down
icon-sort-alpha-asc
icon-sort-alpha-desc
icon-sort-numeric-asc
icon-sort-numberic-desc
icon-sort-amount-asc
icon-sort-amount-desc
icon-command
icon-shift
icon-ctrl
icon-opt
icon-checkbox-checked
icon-checkbox-unchecked
icon-radio-checked
icon-radio-checked2
icon-radio-unchecked
icon-crop
icon-make-group
icon-ungroup
icon-scissors
icon-filter
icon-font
icon-ligature
icon-ligature2
icon-text-height
icon-text-width
icon-font-size
icon-bold
icon-underline
icon-italic
icon-strikethrough
icon-omega
icon-sigma
icon-page-break
icon-superscript
icon-subscript
icon-superscript2
icon-subscript2
icon-text-color
icon-pagebreak
icon-clear-formatting
icon-table
icon-table2
icon-insert-template
icon-pilcrow
icon-ltr
icon-rtl
icon-section
icon-paragraph-left
icon-paragraph-center
icon-paragraph-right
icon-paragraph-justify
icon-indent-increase
icon-indent-decrease
icon-share
icon-new-tab
icon-embed
icon-embed2
icon-terminal
icon-share2
icon-mail
icon-mail2
icon-mail3
icon-mail4
icon-amazon
icon-google
icon-google2
icon-google3
icon-google-plus
icon-google-plus2
icon-google-plus3
icon-hangouts
icon-google-drive
icon-facebook
icon-facebook2
icon-instagram
icon-whatsapp
icon-spotify
icon-telegram
icon-vine
icon-vk
icon-renren
icon-sina-weibo
icon-youtube
icon-youtube2
icon-twitch
icon-vimeo
icon-vimeo2
icon-lanyrd
icon-flickr
icon-flickr2
icon-flickr3
icon-flickr4
icon-dribbble
icon-behance
icon-behance2
icon-deviantart
icon-500px
icon-steam
icon-steam2
icon-dropbox
icon-onedrive
icon-github
icon-npm
icon-basecamp
icon-trello
icon-wordpress
icon-joomla
icon-ello
icon-blogger
icon-blogger2
icon-tumblr
icon-tumblr2
icon-yahoo
icon-yahoo2
icon-tux
icon-appleinc
icon-finder
icon-android
icon-windows
icon-windows8
icon-soundcloud
icon-soundcloud2
icon-skype
icon-reddit
icon-hackernews
icon-wikipedia
icon-linkedin
icon-linkedin2
icon-lastfm
icon-lastfm2
icon-delicious
icon-stumbleupon
icon-stumbleupon2
icon-stackoverflow
icon-pinterest
icon-pinterest2
icon-xing
icon-xing2
icon-flattr
icon-foursquare
icon-yelp
icon-paypal
icon-chrome
icon-firefox
icon-IE
icon-edge
icon-safari
icon-opera
icon-file-pdf
icon-file-openoffice
icon-file-word
icon-file-excel
icon-libreoffice
icon-html-five
icon-html-five2
icon-css3
icon-git
icon-codepen
icon-svg
icon-IcoMoon